今日の環境
package.jsonの編集
scripts.startを以下の通り編集します。
"start": "next start -p 3001",
ログインして移動
いつも通りsshでサーバーにログインします。
docker-compose.ymlのあるディレクトリに移動します。
git pullする
最新のコードを取得します。
docker-compose downする
不慣れな作業の前にdocker-compose downします。
$ docker-compose down
本番環境のdocker-compose.ymlのnginxサービスのdepends_onにfrontendを追記する
以下のような感じになります。
nginx: build: ./nginx ports: - "8000:8000" volumes: - ./nginx/nginx.conf:/etc/nginx/nginx.conf - ./nginx/html:/var/www/html - ./nginx/log:/var/log depends_on: - app - frontend
本番環境のdocker-compose.ymlにfrontendサービスを追加する
以下の通り追記しました。本番環境なのでyarn start
です。
frontend: build: context: ./frontend ports: - '3001:3001' command: 'yarn start' volumes: - ./frontend:/usr/src/app
docker-compose buildする
$ docker-compose build
yarnコマンドが使えるか確認する
$ docker-compose run --rm frontend yarn -v
yarn installする
$ docker-compose run --rm frontend yarn install
yarn buildする
Next.jsアプリケーションをビルドします。
$ docker-compose run --rm frontend yarn build
docker-compose upする
$ docker-compose up
frontendサービスが以下のような感じで起動できたらOKだと思います。
frontend_1 | yarn run v1.22.19 frontend_1 | $ next start -p 3001 frontend_1 | ready - started server on 0.0.0.0:3001, url: http://localhost:3001 frontend_1 | info - SWC minify release candidate enabled. https://nextjs.link/swcmin
一旦止める
control + c を押して一旦止めます。
docker-compose downもしておきます。
$ docker-compose down
nginx.conf にupstream nextjsを追記する
以下のような感じで追記します。
# upstreamのnextjsを定義 upstream nextjs { # server service名:3001; のように記述 server frontend:3001; }
locationを追記する
以下の通り追記しました。
# location location / { proxy_pass http://nextjs/; }
docker-compose upする
以下のコマンドを実行します。
$ docker-compose up
アクセスしてみる
本番環境のURLにアクセスして、Next.jsのスタートページが表示されることを確認しました。
他のURLもこれまで通り表示されるか確認しておきます。
- https://web-bonsai.tech/mpa/
- https://web-bonsai.tech/mpa/tasks
- https://web-bonsai.tech/api/tasks
- https://web-bonsai.tech/index.html
一旦止める
control + c を押して一旦止めます。
docker-compose downもしておきます。
$ docker-compose down
docker-compose up -dする
以下のコマンドで起動しなおします。
$ docker-compose up -d
もう一度ブラウザで確認する
もう一度ブラウザで確認します。
ここまでやった段階での本番環境のdocker-compose.yml
version: "3.9" services: nginx: build: ./nginx ports: - "8000:8000" volumes: - ./nginx/nginx.conf:/etc/nginx/nginx.conf - ./nginx/html:/var/www/html - ./nginx/log:/var/log depends_on: - app - frontend https-portal: image: steveltn/https-portal:1 ports: - 80:80 - 443:443 restart: always environment: DOMAINS: 'web-bonsai.tech -> http://nginx:8000' STAGE: production volumes: - ./https_portal/ssl_certs:/var/lib/https-portal depends_on: - nginx db: image: postgres volumes: - ./tmp/db:/var/lib/postgresql/data environment: POSTGRES_PASSWORD: xxxxxxxxxx(何か強いパスワード) app: build: ./rails command: bash -c 'rm -f tmp/pids/server.pid && bundle exec pumactl start' volumes: - ./rails:/myapp environment: - RAILS_SERVE_STATIC_FILES=false - RAILS_ENV=production - MYAPP_DATABASE_PASSWORD=xxxxxxxxxx(何か強いパスワード) depends_on: - db frontend: build: context: ./frontend ports: - '3001:3001' command: 'yarn start' volumes: - ./frontend:/usr/src/app
ここまでやった段階での本番環境のnginx.conf
user nginx; events { # 1ワーカーの接続数 # worker_connections 2048; # 複数のリクエストを同時に受け付けるか multi_accept on; # 複数アクセスをさばくためにI/O多重化に使うシステムコールを指定する use epoll; } http { # HTTPレスポンスヘッダのContent_Typeに付与する文字コード charset UTF-8; # HTTPレスポンスヘッダのServerにnginxのバージョンを入れるか(開発時以外は入れないほうが吉) server_tokens off; # MIMEタイプと拡張子の関連付けを定義したファイルを読み込む include /etc/nginx/mime.types; # 上記したmime.typesにマッチしなかった場合の設定 # octet-streamは任意のバイナリコードを意味し、ブラウザでは実行したりせず、単にダウンロードする挙動をとるらしい default_type application/octet-stream; # upstreamのpumaを定義 upstream puma { # server service名:3000; のように記述 server app:3000; } # upstreamのnextjsを定義 upstream nextjs { # server service名:3001; のように記述 server frontend:3001; } # example.comの設定 (nginx:8000 の設定) server { # リスニングポート listen 8000; # ドメイン設定(ローカル環境ではlocalhostで、本番環境ではドメインを設定する。) # server_name example.com; server_name web-bonsai.tech # HTTPレスポンスヘッダのContent_Typeに付与する文字コード charset utf-8; # logの出力先 access_log /var/log/nginx/access.log; error_log /var/log/nginx/error.log; # ドキュメントルート root /var/www/html; # location共通の設定 proxy_redirect off; proxy_set_header Host $http_host; proxy_set_header X-CSRF-Token $http_x_csrf_token; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-Proto $scheme; # location location /index.html { index index.html; } # location location /mpa/ { proxy_pass http://puma/mpa/; } # location location /api/ { proxy_pass http://puma/api/; } # location location / { proxy_pass http://nextjs/; } } }