frontendサービスを別サーバーに移管する | Mac + Docker + Rails + Next.js その0046

frontendサービス用のサーバーを契約してセットアップする

以前と同じく契約して

• サーバーのセキュリティ設定
• vimのインストール
• gitのインストール
• dockerのインストール
• docker-composeのインストール

などのセットアップをします。

• さくらVPSを契約する | Mac + Docker + Rails その0012 - web_bonsaiの日記
• さくらのVPSの初期セキュリティ設定をする | Mac + Docker + Rails その0015 - web_bonsaiの日記
• さくらのVPSのCentOS9にgitをインストールする | Mac + Docker + Rails その0020 - web_bonsaiの日記
• さくらのVPSのCentOS9にDocker Engineをインストールする | Mac + Docker + Rails その0021 - web_bonsaiの日記
• Docker Composeをインストールする | Mac + Docker + Rails その0022 - web_bonsaiの日記

frontendサービス用のリポジトリを作成してサーバーにcloneする

だいたい以前やった手順を参考に行います。

• 本番環境にgit cloneする | Mac + Docker + Rails その0023 - web_bonsaiの日記

frontendサービスを本番環境でブラウザからアクセスできるようにする

だいたい以前やった手順を参考に行います。

• 本番環境でブラウザからアクセスできるようにする | Mac + Docker + Rails その0024 - web_bonsaiの日記
• 本番環境にNext.jsアプリケーションをデプロイする | Mac + Docker + Rails + Next.js その0035 - web_bonsaiの日記

ブラウザで確認してみる

ブラウザで以下のURLにアクセスしてみます。

• Myapp
• https://web-bonsai.tech/task-app/tasks/

とりあえずバックエンドもフロントエンドもそれぞれのサーバーで表示できるようになりました。

以下のドメインでそれぞれ運用していきます。

• api.web-bonsai.tech
• web-bonsai.tech