[React]~MovieApp: dockerで環境構築をしよう!~

こんにちは、KOUKIです。

ReactでMovie Appの開発を行います。

フロントエンド側はReact、バックエンド側はGo言語で実装するので、Webアプリ開発を一通り経験したい人には必見な記事になると思います。

今回は、Reactの開発環境をDockerを使って構築してみましょう。

尚、Udemyの「Working with React and Go (Golang)」を参考にしているので、よかったら受講してみてください。

事前準備

フォルダ/ファイル

Reactプロジェクトの作成

Reactプロジェクトを以下の手順で作成しましょう。

  1. Reactプロジェクトを作成
  2. React用のDockerfileを作成
  3. docker-compose.ymlにサービスとして追加
  4. ビルドして起動

Reactプロジェクトを作成

Reactのプロジェクトを作成するには、NodeJSが必要です。

以下の記事にある通り、ローカル環境にNodeJSをインストールしましょう。

インストールが完了したら、下記のコマンドを実行します。

コマンドが成功したら、カレントディレクトリに「go-movies」ディレクトリが生成されます。

React用のDockerfileを作成

React用のDockerfileを用意します。

docker-compose.ymlにサービスとして追加

ビルドして起動

コンテナをビルドして、起動します。

コンテナが立ち上がったら、ブラウザから「http://localhost:3000」へアクセスしてみましょう。

上記の画面が出てきたら成功です。

次回

次回は、画面遷移処理を実装しましょう

記事まとめ

学習記録

参考書籍


ソースコード

ここまで実装したソースコードを下記に記載します。

Dockerfile-react

docker-compose.yml

package.json

コメントを残す