LaravelとNuxt.jsをVSCodeで開発する環境をDockerで用意した【Nuxt.js編】

前回Laravelの開発環境を用意したので今回はNuxt.jsの開発環境を用意していきます。前回まででこんな感じの構成になっています。ここにNuxt.jsの環境を整えていきます。

Nuxt.js環境構築

Dockerfileの作成

apiフォルダに作るのは変だから一個別のフォルダを作ろう。名前はappでいっか。そんでDockerfileを作ってと。

Dockerfileは前回のを使えそうな部分だけ残して流用しよう。こんなもんかな。

Nodeのインストール

調べてみると次のコマンドでインストールできるらしい。バージョンは現時点のLTS版の14にしておこう。

動作確認

nodeが入ったかどうかコンテナに入ってみて確認しておこう。

実行コマンド

c:\project>cd app

c:\project\app>docker build -t testimg2 .

c:\project\app>docker run -itd –name testcon2 testimg2

c:\project\app>docker exec -it testcon2 bash

# node -v

無事実行できたらしい。

Nuxt.jsのプロジェクト作成

次はNuxt.jsのプロジェクトを作ろうかな。

実行コマンド

# exit

c:\project\app>npx create-nuxt-app src

~適当に質問に答える~

作ったプロジェクトをイメージ内に組み込むようにDockerfileを編集してっと。Linuxのお作法はよく分からないけど少しググってみると/usr/local/srcあたりが良さそう。

動作確認

さてもう一度動作確認してみよう。

実行コマンド

c:\project\app>docker stop testcon2

c:\project\app>docker rm testcon2

c:\project\app>docker build -t testimg2 .

c:\project\app>docker run -itd -p 3000:3000 –privileged –name testcon2 testimg2 /sbin/init

c:\project\app>docker exec -it testcon2 bash

# cd /usr/local/src/

# npm run dev

ダメかー。

調べてみるとphpの時と同様にデフォルトではリモートからのアクセスは受け付けないとのこと。いくつか方法はあるみたいだけど1例としてnuxt.config.jsに以下を追加するとリモートアクセスを受け付けるようになるらしい。

編集して再度開発サーバーを起動すると見られるようになった。

Apacheでの確認

あまり意味ない気もするけどApacheでの動作も一応試してみる。作成したコンテナはポートマッピングしていないので作り直す。80番は前回Laravelの環境で使っているので8080番にしておいた。

実行コマンド

# exit

c:\project\app>docker stop testcon2

c:\project\app>docker rm testcon2

c:\project\app>docker run -itd -p 3000:3000 -p 8080:80 –privileged –name testcon2 testimg2 /sbin/init

c:\project\app>docker exec -it testcon2 bash

今回はSPAでNuxt.jsのプロジェクトは作成しているのでnpm run generateコマンドの出力先を変更するためにnuxt.config.jsへ以下のコードを追記しgenerateする。

実行コマンド

# cd /usr/local/src/

# vi nuxt.config.js

~前述のコードを追記~

# npm run generate

でホスト上のブラウザで8080ポートに接続してみる。

意外とすんなり見られた。

最後に

前回の経験があったので比較的順調に進められた。コンテナが2つ出来たので次はdocker-composeでまとめて扱えるようにしようと思う。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です