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!

Dockerコマンド集【Docker】

コマンド 説明
docker ps -a コンテナを全て表示
docker ps 起動中のコンテナを全て表示
docker rm [コンテナ名] コンテナの削除
docker build -t [任意の名前] . イメージの作成(ビルド)
docker run -it –name [任意のコンテナ名] -p 3000:3000 -v $PWD:/usr/src/app [イメージビルドで使用した名前] コンテナ起動
docker image ls イメージ一覧確認
docker image rm [イメージID] イメージの削除
docker logs [コンテナ名] コンテナのログ確認
docker start [コンテナ名] コンテナ起動
docker stop [コンテナ名] コンテナ停止

Dockerの環境構築(mac)【Docker】

■はじめに

本記事は、macでの環境構築です。

dockerに関する詳しい説明などは記載しておりません。

■手順

こちらの公式サイトより、Docker Hubのアカウントを作成します。

こちらの公式サイトで「Get Docker」を押下して、Dockerのdmgファイルをダウンロードします。

ダウンロードしたら、「dmg」を実行して、Docker Desktopアプリを取得します。

Dockerアプリを起動して、画面の指示通りに進めていくと、チュートリアルコンテナが起動されます。

これで、環境構築は終了です。

ターミナルで、以下を実行することで、Dockerがインストールされている事が確認できます。

docker --version