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>

まとめ

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

Comments

コメントを読み込み中...

コメントを残す

返信先:
0/2000文字