web_bonsaiの日記

web開発の学習日記です。誰に見せるためでもないただの日記です。

本番環境でブラウザからアクセスできるようにする | Mac + Docker + Rails その0024

今日の環境

ローカル

  • M1 Mac
  • macOS Monterey
  • docker 20.10.14
  • docker-compose 2.5.0

リモート

  • さくらのVPS
  • CentOS 9
  • docker 20.10.16
  • docker-compose 1.29.2

ログインして移動する

いつも通りログインします。

web_bonsaiディレクトリに移動します。

$ cd git_repos/web_bonsai

本番環境用のdocker-compose.ymlを作成する

docker-compose.sample.ymlをコピーして、docker-compose.ymlを作成します。

$ cp docker-compose.sample.yml docker-compose.yml

docker-compose.ymlのhttps-portalサービスのenvironmentのDOMAINSを以下のように書き換えます。

    environment:
      DOMAINS: 'web-bonsai.tech -> http://nginx:8000'

docker-compose.ymlのdbサービスのenvironmentのPOSTGRES_PASSWORDを何か強いパスワードに書き換えます。ここでは仮にxxxxxxxxとしておきます。

    environment:
      POSTGRES_PASSWORD: xxxxxxxx

docker-compose.ymlのappサービスの以下の記述を削除します。

    ports:
      - "3000:3000"

docker-compose.ymlのappサービスのcommandを以下の通り書き換えます。

command: bash -c 'rm -f tmp/pids/server.pid && bundle exec pumactl start'

docker-compose.ymlのappサービスのenvironmentのRAILS_ENVをproductionに書き換えて、データベース用のパスワードを先ほどのPOSTGRES_PASSWORDで設定したものと同じにします。変数名はrails/config/database.sample.ymlの記述内容に合わせてMYAPP_DATABASE_PASSWORDにしています。

    environment:
      - RAILS_SERVE_STATIC_FILES=false
      - RAILS_ENV=production
      - MYAPP_DATABASE_PASSWORD=xxxxxxxx

本番環境用のnginx.confを作成する

nginx/nginx.sample.confをコピーして、nginx/nginx.confを作成します。

$ cp nginx/nginx.sample.conf nginx/nginx.conf

以下のようになっている箇所を

    # ドメイン設定
    server_name localhost;

以下のように本番環境に設定したいドメインで書き換えます。

    # ドメイン設定
    server_name web-bonsai.tech;

一旦railsディレクトリを削除する

一回削除します。

$ rm -rf rails/

本番環境でrails newしてbundle installする

ローカル環境構築手順「Docker Composeを使ってローカルでRails7のSSL環境構築 | Mac + Docker + Rails その0006 - web_bonsaiの日記」を参考に作業をします。

以下のセクションをローカル環境と同じように実行します。

  • railsディレクトリを作成
  • rails用のDockerfileの作成とその記述内容
  • rails/Gemfileの作成とその記述内容
  • rails/Gemfile.lockを空で作成
  • entrypoint.shの作成とその記述内容

それからローカル環境と同じように rails new します。

このときサーバーのスペックが低すぎると成功しません。
メモリ512MBのプランだと失敗しました。
メモリ2GBのプランでだと成功しました。

$ docker-compose run --rm --no-deps app rails new . --force --database=postgresql

また、このとき以下のようなエラーが出るかもしれませんが、これはbundle installすれば大丈夫だと思います。

         run  bundle binstubs bundler
Could not find gem 'sprockets-rails' in locally installed gems.
       rails  importmap:install
Could not find gem 'sprockets-rails' in locally installed gems.
Run `bundle install` to install missing gems.
       rails  turbo:install stimulus:install
Could not find gem 'sprockets-rails' in locally installed gems.
Run `bundle install` to install missing gems.

ローカル環境と同じようにbundle installします。

$ docker-compose run --rm app bundle install

rails newで生成されたファイルの所有者とグループをログイン中のユーザーに変更する

$ sudo chown -R ${USER}:${USER} rails/

rails newで生成されたファイルとリポジトリとの差分を整理する

rails newによって生成されたファイルを優先するのか、web_bonsaiリポジトリのファイルを優先するのか、差分を見ながら精査して、ファイルを編集します。

差分を見て、以下の通り実行しました。

$ git checkout rails/.gitignore
$ git checkout rails/config/routes.rb
$ git checkout -f rails/app
$ git checkout -f rails/config/database.sample.yml
$ git checkout -f rails/test/controllers/homes_controller_test.rb

rails/Gemfile.lockはどうして良いかわからなかったのですが、とりあえずadd, commit, pushしました。

gitのuser.emailとuser.nameを設定します。

$ git config --local user.email "何かemail"
$ git config --local user.name "何か名前"

add, commit, pushします。

$ git add rails/Gemfile.lock
$ git commit -m "rails/Gemfile.lockを本番環境からcommit"
$ git push origin main

docker-compose buildする

ローカル環境と同じようにbuildコマンドを実行します。

railsのdefaultのデータベース設定をする

まずはローカル環境でやったのと同じように、rails/config/database.ymlのdefaultの host, username, password の項目を追記します。

productionのデータベース設定をする

以下のようにユーザー名がmyappとなっている箇所を

username: myapp

以下のようにpostgresに変更します。

username: postgres

db createする

本番環境用のdbを作成します。

$ docker-compose run app rails db:create

docker-compose upする

docker-compose upします。

$ docker-compose up

初回はhttps-portalの証明書の設定に時間がかかります。

1〜2分程度で終わるとは思います。

ポート80とポート443からのアクセスを許可する

さくらインターネットの公式のパケットフィルターの設定マニュアル「パケットフィルター — さくらの VPS マニュアル」に沿って、Web(80と443)を許可します。

「追加」ボタンをクリックした後、「設定」ボタンをクリックするのを忘れないようにしましょう。

忘れがちですね...。

ブラウザからアクセスしてみる

ブラウザ(例えばChrome)で「https://web-bonsai.tech/」にアクセスしてみます。

まだhttps-portalの設定がlocalなので、以下のような表示になります。

一旦そのままアクセスしてみます。

以下のような表示になりました。まだrailsの設定が不充分なようです。

railsのログを見る

ctrl + c を押してdocker-composeを止めます。

downもしておきます。

$ docker-compose down

ログを見てみます。

$ cat rails/log/production.log

以下のように書いてあり、cssが無いことがわかりました。

[c43a9eab-b276-48dd-9c3b-d5d17ab3a1c8] ActionView::Template::Error (The asset "application.css" is not present in the asset pipeline.

assets:precompileする

以下のコマンドを実行します。

$ docker-compose run app bundle exec rails assets:precompile RAILS_ENV=production

もう一度docker-compose upしてブラウザからアクセスしてみる

upします。

$ docker-compose up

ブラウザで「https://web-bonsai.tech/」にアクセスしてみます。

正常にrailsのrootページの閲覧ができるようになりました。

ブラウザで「https://web-bonsai.tech/index.html」にもアクセスしてみると、nginx/html/index.htmlのページが表示できました。

SSL証明書を設定する

ctrl + c を押してdocker-composeを止めます。

downもしておきます。

$ docker-compose down

https-portalの設定をproductionにします。

docker-compose.ymlのhttps-portalサービスのenvironmentのSTAGEを以下のように書き換えます。

    environment:
      DOMAINS: 'web-bonsai.tech -> http://nginx:8000'
      STAGE: production

upしなおします。

$ docker-compose up

最初にアクセスしたのとは違うブラウザ(例えばFirefox)で「https://web-bonsai.tech/」にアクセスしてみます。

以下の画像はFirefoxのものですが、SSL証明書が設定されて、安全な接続ができるようになったことが確認できました。

最初にアクセスしたブラウザの方はすぐには「安全な接続」には切り替わらないかもしれません。

docker-compose up -dで起動しなおす

ctrl + c を押してdocker-composeを止めます。

downもしておきます。

$ docker-compose down

up -d します。

$ docker-compose up -d