Next.jsプロジェクトを開発環境と本番環境のDockerで動かしてみたい【その２】

Next.jsプロジェクトを開発環境と本番環境のDockerで動かしてみたい【その１】の続きです。

前回は、ローカルの Mac 上の Docker で Next.js のサンプルサイトを表示するところまで頑張りました。

VPS上の Docker で動かしたい

今回本番環境として用意するのは、VPSです。

既に契約してあったさくらVPS上に docker をインストールして、前回と同じように Next.js 公式のサンプルを表示することを目標とします。

VPSにDockerをインストールする

VPS 上への Docker のインストールは以下の記事を参考にしてみてください。

さくらVPSにDockerをインストールする

 

VPS上のDockerでサンプルを動かす

やることは開発環境と同じはずです。

STEP.1
作業ディレクトリを用意する
% sudo mkdir /srv/next-app
% cd /srv/next-app
STEP.2
サンプルアプリを作成する
% npx create-next-app --example with-docker-compose with-docker-compose-app
権限がない場合

上記コマンドを実行してみると権限がないと言われてしまったので、権限を付与しておきます。

npx: installed 1 in 2.496s
The application path is not writable, please check folder permissions and try again.
It is likely you do not have write permissions for this folder.

% cd /srv
% sudo chmod 777 next-app

インストール後は権限を戻しておくと良いでしょう。

% cd /srv
% sudo chmod 755 next-app

STEP.3
コンテナを用意する

Next.js の公式サンプルに沿って行います。

% cd /srv/next-app/with-docker-compose-app
# ネットワークの作成
% docker network create my_network

# 依存パッケージのインストール
% cd /srv/next-app/with-docker-compose-app/next-app
% npm install

# イメージの構築
% cd /srv/next-app/with-docker-compose-app
% docker compose -f docker-compose.prod.yml build

# コンテナをデーモン化して起動
% docker compose -f docker-compose.prod.yml up -d

閲覧する

コンテナの起動は無事にできたようですが、一体どこの何を見ればサイトを見ることができるのでしょうか。

# コンテナを確認
% docker container ls

CONTAINER ID   IMAGE                              COMMAND                  CREATED          STATUS          PORTS                                         NAMES
d7b1ec54be42   with-docker-compose-app_next-app   "docker-entrypoint.s…"   33 minutes ago   Up 33 minutes   0.0.0.0:3000->3000/tcp                        next-app

ローカル環境の場合は http://localhost:3000 でアクセスすることができました。

# サーバ通信時に使われるパブリックIPアドレス
% curl ifconfig.me
xx.xxx.xxx.xx

curl で確認したIPアドレスを用いてhttp://xx.xxx.xxx.xx:3000にアクセスしてみたところ無事に閲覧することができました。

おわりに

ドメインの設定をしていないのでまだ実用は現実的ではないですが、さくらVPS の Ubuntu 上にも Next.js で作成したサイトを配置できることがわかりました。

本番環境では コンテナを永続化して常にコンテナが起動している状態にする必要があります。(docker compose -f docker-compose.prod.yml up -dの-dでデーモン化しています。)

多分つづく🐈‍⬛

#Docker#Next.js#VPS