はじめに

今回は、現在受講しているITスクールのハッカソン活動に基づく内容です。

チームメンバーの方にフロントエンドのDocker関連ファイルを準備していただいたので、それを私のローカル環境でも試してみようと思いました。

これは個人的な備忘録としての走り書きメモになりますが、温かい目で見ていただければ幸いです。

書こうと思ったきっかけ

私自身、フロントエンドのDocker関連ファイルを作成する経験はこれまでほとんどありませんでした。

今回、勉強する機会があったため、記事として整理してみることにしました。

チームのリポジトリにアップしていただいたものを、自分のローカル環境にクローンし、正常に動作するかどうかを確認していきます。

今回は、Dockerファイルやフロントエンド部分の詳細な説明は割愛します。

主に、リポジトリをローカル環境でクローンし、正常に動作するかどうかを確認することが目的です。

その点、あらかじめご了承ください。

まずは、リポジトリをローカル環境にダウンロードする必要があります。

そのため、git cloneコマンドを使用してリポジトリをクローンします。

cd ~/projects

git clone <リポジトリのURL>

例:

git clone https://github.com/example/frontend-docker.git

cd xxx
ls

出力例:

Dockerfile
docker-compose.yml
src/
package.json

ここでは、動作確認の手順がリポジトリ内のREADMEに記載されていたため、その手順に沿って作業を進めました。

以下は、ローカル環境での開発環境構築手順です。

コンテナを立ち上げる

Docker Composeを使用して、必要なコンテナを起動します。

docker-compose up -d

コンテナの中に入る

起動したコンテナ内で作業を行うため、appコンテナに入ります。

docker-compose exec app bash

プロジェクトディレクトリに移動

プロジェクトのディレクトリに移動します。

$ cd xxx

モジュールのインストール（初回およびモジュール追加時のみ必要）

必要なモジュールをインストールします。

$ npm install

開発用サーバーを起動

開発環境用のサーバーを起動します。

npm run dev

ブラウザで確認

開発サーバーが起動したら、以下のURLにアクセスして、ブラウザ上で表示を確認します。

http://localhost:5173

ブラウザからアクセスした結果、問題なくReactのルートページが表示されることを確認できました。

この確認が無事に完了したことで、ローカル環境での動作確認は成功と言えます。

最後までお読みいただき、ありがとうございました。

今回は、自分用の備忘録として、ローカル環境でのフロントエンド動作確認を中心にまとめましたが、非常に良い学びの機会となりました。

今後は、自分一人でもフロントエンド関連のDocker関連周りのファイルを作成できるよう、さらに勉強を進めていきたいと思います。