Reigle 技術ブログ

プログラミング、IT関連の記事中心

ReactをDockerで実行する方法【React/Docker】

■はじめに

ReactとDockerの環境構築は完了している前提で記載します。

まだの方は、それぞれの環境構築を行ってからご覧ください。

■手順

以下のコマンドを実行し、Reactプロジェクトを作成します。

create-react-app dockersample

以下のコマンドを実行し、reactアプリが正常に動作することを確認します。

cd dockersample
yarn start

以下のコマンドで、Dockerfileを生成します。

vi Dockerfile

「Dockerfile」に以下を記載します。

# ベースイメージの作成
FROM node:12.16.1
# コンテナ内で作業するディレクトリを指定
WORKDIR /usr/src/app
# package.jsonとyarn.lockを/usr/src/appにコピー
COPY ["package.json", "yarn.lock", "./"]
# パッケージをインストール
RUN yarn install
# ファイルを全部作業用ディレクトリにコピー
COPY . .
# コンテナを起動する際に実行されるコマンド
ENTRYPOINT [ "yarn", "start" ]

以下のコマンドで、イメージを生成する(ビルドする)

docker build -t sample .

以下のコマンドでdockerを起動する

docker run -it --name sample -p 3000:3000 -v $PWD:/usr/src/app sample

ブラウザで「http://localhost:3000/」にアクセスして、Reactの画面が表示されればOK!