Nginx/React/MongoDB on Docker の構築 その6 Reactアプリをコンテナイメージに

前回作ったアプリを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を使って、環境変数を渡す練習をしてみる。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA