テクノロジー

ReactをDocker内で動かしてみる

ReactをDocker内で動かしてみる

とりあえずDockerとやらを触れてみよう程度で公式サイトを巡ったのでメモ書き。

Reactアプリをつくる

create-react-appを使ってアプリを作ります。

npx create-react-app my-app
cd my-app
npm start

React公式

Dockerfileを作成する

アプリのルートディレクトリ(my-app)内にDockerfileを作ります。

以下のコマンドまたはGUIでファイルを作成します。

touch Dockerfile

Dockerfileの中身

/Dockerfile

FROM node:14-alpine

# Create app directory
WORKDIR /usr/src/app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install app dependencies
RUN npm install

# Bundle app source
COPY . .

EXPOSE 3000
CMD [ "npm", "start" ]

node公式

割とコメントもコマンドも分かりやすいと思うので細かい説明は公式を読めばいいと思います。

ついでに.dockerignoreも作る

/.dockerignore

node_modules
npm-debug.log

.gitignoreと同じ要領で無視してもいいフォルダやファイルをここに書き込みます。

Dockerイメージをビルドする

以下のコマンドでさっき作ったDockerfileからDockerイメージをビルドします。 -tフラッグでタグすることができると書かれているけどDockerイメージに名前を付けるみたいな感じです。

docker build . -t <your username>/node-web-app

以下のコマンドでビルドしたイメージが確認できるはずです。

docker images

イメージを実行する

以下のコマンドでさっきビルドしたDockerイメージを実行するとコンテイナが動きます。 -pはポートのことでコンテイナ内のポート3000をホストマシンのポート3000にリダイレクトします。 -dはdetachedの略でコンテイナをバックグラウンドで動かすことができます。

docker run -p 3000:3000 -d <your username>/node-web-app

これでホストマシンからhttp://localhost:3000からコンテイナ上で動くReactアプリにアクセスすることができるようになりました。

基本的なDockerコマンドを使う

イメージIDを見る

docker images

イメージを消す

docker rmi <image id>

コンテイナIDを見る

以下のコマンドで動いているコンテイナのリストを見ることができます。 ここで調べられるコンテイナIDを使ってもっと遊んでみます。

docker ps

-aをつけるとすべての(停止中も含め)コンテイナを見ることができます。

docker ps -a

さらに–no-truncをつけると長いIDなんかも省略されずに表示されます。

docker ps -a --no-trunc

コンテイナのログを出力する

コンテイナが動いているときに以下のコマンドを実行します。

docker logs <container id>

コンテイナの中に入る

コンテイナが動いているときに以下のコマンドを実行します。

docker exec -it <container id> /bin/bash

コンテイナを止める

コンテイナが動いているときに以下のコマンドを実行します。

docker stop <container id>

コンテイナを再開する

コンテイナが止まっているときに以下のコマンドを実行します。

docker start <container id>

コンテイナを消す

コンテイナが止まっているときに以下のコマンドを実行します。

docker rm <container id>

まとめ

公式のチュートリアルの最低限をさらっとまとめただけのメモですが、コマンドも直観的で分かりやすいなあという感想です。