前回作ったアプリをNginxのDockerに埋め込んで､イメージを作成する
目次
React アプリをビルド
ビルドコマンドを使う｡
npm run build
ビルドに成功するとbuildフォルダが以下のように作成される｡
# ls -la build/
total 20
drwxr-xr-x. 3 root root 130 Mar 30 00:41 .
drwxr-xr-x. 6 root root 119 Mar 30 00:40 ..
-rw-r--r--. 1 root root 196 Mar 30 00:41 asset-manifest.json
-rw-r--r--. 1 root root 3870 Mar 30 00:40 favicon.ico
-rw-r--r--. 1 root root 756 Mar 30 00:41 index.html
-rw-r--r--. 1 root root 317 Mar 30 00:40 manifest.json
-rw-r--r--. 1 root root 3164 Mar 30 00:41 service-worker.js
drwxr-xr-x. 4 root root 27 Mar 30 00:41 static
このbuildフォルダをDockerイメージにコピーをする必要がある｡
まずは､コンテナからホストにdocker cpコマンドでアプリをコピーする｡
docker cp 885fba123646:/root/demo/frontend/ .
Dockerfile を編集
今回作成するDockerコンテナ用フォルダを作成する
mkdir frontendapp
以下の必要なものを作成したフォルダにコピーする｡
default.conf
nginxの設定ファイルfrontend
frontendのアプリが入ったディレクトリ
default.confの中身は簡単に以下のように設定
server {
listen 80 default_server;
root /var/www/frontend;
server_name localhost;
access_log /var/log/nginx/host.access.log main;
index index.html index.htm;
}
Dockerfileはnginxのものをベースに以下を追加
RUN mkdir /var/www/
COPY ./default.conf /etc/nginx/conf.d/default.conf
COPY ./frontend/build/ /var/www/frontend
最終的なDockerfileはこんな感じ｡
FROM centos:7
MAINTAINER "yuki"
RUN yum update -y && yum clean all
RUN touch /etc/yum.repos.d/nginx.repo
RUN echo '[nginx]' >> /etc/yum.repos.d/nginx.repo
RUN echo 'name=nginx repo' >> /etc/yum.repos.d/nginx.repo
RUN echo 'baseurl=http://nginx.org/packages/centos/$releasever/$basearch/' >> /etc/yum.repos.d/nginx.repo
RUN echo 'gpgcheck=0' >> /etc/yum.repos.d/nginx.repo
RUN echo 'enabled=1' >> /etc/yum.repos.d/nginx.repo
RUN yum install -y nginx && yum clean all
RUN mkdir /var/www/
COPY ./default.conf /etc/nginx/conf.d/default.conf
COPY ./frontend/build/ /var/www/frontend
# Enable nginx
RUN systemctl enable nginx
# Start init daemon
CMD ["/sbin/init"]
準備ができたのでコンテナイメージの作成
docker build -t yuki/frontend:0.1 .
コンテナイメージができたことを確認
$ docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
yuki/frontend 0.1 72463995b2c5 5 minutes ago 304.5 MB
起動テスト
作ったコンテナイメージのテスト
docker run -d --name frontend -p 10080:80 yuki/frontend:0.1
ホストの10080ポートを割り当てて､10080ポートにアクセスすると前回作成したTODOアプリの画面がでる｡
おわり
Dockerfile内でファイルのコピーを記述し､イメージ作成と起動ができた｡
次回はenvsubstを使って､環境変数を渡す練習をしてみる｡