Vue.js + nuxt.js + Django(DRF) heroku デプロイ

投稿者: Auther | 5 ヶ月, 2 週間 前 | 0 のコメント

1.ソースをgithubへ

$ git init
$ git add .
$ git commit -m "first commit"
$ git remote add origin https://github.com/******/******.git
$ git push -u origin master

変更は
$ git add .
$ git commit -m "first commit"
$ git push origin master

git 初期化
$ rm -rf .git


Vue.jsの部分がサブフォルダになり、githubに入りない問題

$ mv リポジトリ名 subfolder_tmp
$ git submodule deinit リポジトリ名
$ git rm --cached リポジトリ名
$ mv subfolder_tmp リポジトリ名
$ git add リポジトリ名

$ git add .へ

git clone https://github.com/*******/*******.git . -b master

2.Djangoの設定 (すでに開発したものがあるという前提)

pip install gunicorn whitenoise django-heroku

setting.py 

静的ファイルの設定

import os
import django_heroku

#TEMPLATES.DIRSindex.htmlのパスを書いておけばOK
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'client/dist')],

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) MIDDLEWARE = [ (その他のミドルウェア) 'whitenoise.middleware.WhiteNoiseMiddleware', ] STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles') STATIC_URL = '/static/' # すでにあるはず STATICFILES_DIRS = ( os.path.join(BASE_DIR, 'client/dist/static'), ) STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

#heroku対応
django_heroku.settings(locals())

urls.py

from django.urls import path, include, re_path  # 追加
from django.views.generic import TemplateView

urlpatterns = [ path('admin/', admin.site.urls), path('api/', views.api), re_path('', TemplateView.as_view(template_name='index.html')), ]

3.Vue.js側の設定

静的ファイルが生成

npm run generate

nuxt.config.js

# 追加
build
: { publicPath: '/static/_nuxt/' }

4.heroku操作

package.json

"scripts": {
  "postinstall": "cd client; npm install --production=false",
  "build": "cd client; npm nuxt-ts generate"
}


Procfile

web: gunicorn <wsgiファイル>.wsgi

$ heroku login
$ heroku create
$ heroku buildpacks:set heroku/python
$ heroku buildpacks:add --index 1 heroku/nodejs
$ git push heroku master
$ heroku open

現在未評価

現在コメントはありません

新しいコメント

必須

記入が必要です(公開はされません)

オプション

最近の投稿

アーカイブ

2021
2020

タグ

多義語(1) 英語原論(15) 単語 上級(12) コラム(7) mezzanine(1) サブスリー(4) music(11) 海外移住(2) 文化(2) 政治(2) nujabes(3) ランニング(4) 発音(14) django(4) 文法(15) 文法問題(1) 教育論(3) 転職(2) 仕事(1) アニメ(1) cowboy bebap(26) TOEIC(1) 歴史(2) vuejs(7) 経済(1) lesencrypt(1) データサイエンス(1)

著者

Auther (113) admin (2)

フィード

RSS / Atom

Social Links

運営より

当ウェブサイト内のコンテンツ(文章、写真、イラスト、サイト構造など)に関する著作権等は 弊社、または制作者などに帰属しております。営利、非営利を問わず、当ウェブサイトのコンテンツの全て 、または一部を許可なく複製、転用、販売など二次利用することはご遠慮ください。

目覚めよ!英語力