DockerでnextJsとnestJsの環境構築をする

NextJsとNestJsをDockerで立ち上げる あくまでもDockerのハンズオンなので別に何でもいいのだが、どうせならということで、次に考えている構成でやってみることにした。 ちなみに【環境構築】NestJS+Next.js+TypeScript+Dockerの環境構築ハンズオンに倣うようにすすめていくので、こちらの記事を参考にした方がいいかもしれない。 docker-compose.ymlファイルを作成する プロジェクトのルートでdocker-compose.ymlファイルを作成する。そのために下記コマンドを実行する。 実行後、docker-compose.ymlという名前の空ファイルができていることを確認することができる。 このファイルにDockerの設定を書いていく。 設定内容は把握できていないが、これでバックエンドのdocker-compose.ymlが作成できたらしい。 まずはバックエンドのみで起動するためフロントエンドの設定は書かない。 バックエンドの設定 それではバックエンド、つまりNestJs側の設定をすすめていく。 Dockerファイルの作成 設定ファイルに書いた で指示したディレクトリを作成する。 作成したディレクトリにDockerfileを作成する。 作成が完了したら以下の内容を記述する。 ちなみにnodeのバージョンは参考にした記事の通りではなく、なんとなく現在他案件で使用しているバージョンにしてみた。 ↓のちに下記に変更した（よくわからないけど）。 これでDocker側の設定は完了。 NestJsをインストールする 次にNestJsをインストールする。 プロジェクトのルートに戻り、nest newを実行※１する。 上記のように2つ聞かれるので、1つ目はbackend、2つ目は任意のpackage managerを選択する。 が表示されればインストール完了。 ※1 @nestjs/cliをインストールしたことない人、つまり初めての人はnest new の前に下記コマンドを実行する。 バックエンドを起動する まずはDockerを起動する。 色々処理が走り終わった後にhttp://localhost:3000/にアクセスできれば起動が成功している。 フロントエンドの作成 次にフロントエンドの作成をするので、いったんDockerは落としておく。 Dockerファイルの作成 上記コマンドで作成したDockerfileに以下を追記する docker-compose.ymlファイルに追記 バックエンドの環境構築の際に書いたdocker-compose.ymlにフロントエンドの設定を追記する。 NextJsをインストールする プロジェクトのルートに戻りNextJsをインストールする。 なんか今まで聞かれたことない質問をされたが（Next13のせいか）、今回の肝となるのはProject Nameでfrontendと答えればいい。 ...全部Yesにするべきだったかもしれない。が、今回は気にすることないのでそのまま進める。 次にNextのpackage.jsonのポートを3333に変更する。 サーバーを起動する コケたので調べたら が原因だったので、削除で再実行。 またエラーが出たので、調査すると どうやらフロントのDockerfileでエラーが出ていたので、上記該当行削除して再実行したら無事にDockerが起動した。 ちなみに でも動作した。ただこのコマンド何をしているかはわからない。 http://localhost:3333/にアクセスするとブラウザでも動いていることが確認できた。 とりあえずスタートラインに立てた。 立って気づいたけど、ホットリロードが効かない。これはまた別で調査する。今回はともかくDockerで基本的な環境構築まで。