はじめに
今回は、現在受講しているITスクールのハッカソン活動に基づく内容です。
チームメンバーの方にフロントエンドのDocker関連ファイルを準備していただいたので、それを私のローカル環境でも試してみようと思いました。
これは個人的な備忘録としての走り書きメモになりますが、温かい目で見ていただければ幸いです。
書こうと思ったきっかけ
私自身、フロントエンドのDocker関連ファイルを作成する経験はこれまでほとんどありませんでした。
今回、勉強する機会があったため、記事として整理してみることにしました。
チームのリポジトリにアップしていただいたものを、自分のローカル環境にクローンし、正常に動作するかどうかを確認していきます。
補足事項
今回は、Dockerファイルやフロントエンド部分の詳細な説明は割愛します。
主に、リポジトリをローカル環境でクローンし、正常に動作するかどうかを確認することが目的です。
その点、あらかじめご了承ください。
ローカルにgit cloneしてみた
まずは、リポジトリをローカル環境にダウンロードする必要があります。
そのため、git cloneコマンドを使用してリポジトリをクローンします。
手順
- ターミナルを開きます。
- 任意のディレクトリに移動します。
例えば、以下のようにprojectsディレクトリに移動します:
cd ~/projects
- クローンしたいリポジトリのURLを用意します。
- 以下のコマンドを実行してリポジトリをクローンします:
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関連周りのファイルを作成できるよう、さらに勉強を進めていきたいと思います。