「nginx」タグアーカイブ

Nginx/React/Express/MongoDB on Docker の構築 その3 React on Nginx on Docker

React

Reactはwebアプリのフロントエンド開発用ライブラリ。
公式によると宣言型で効率的かつ柔軟なJavascriptライブラリらしい。
インフラエンジニアのイメージとしては、クライントサイドでの実装を簡単に作れるライブラリという勝手なイメージ。
Webページにあるフォームのチェックやサジェスト機能を実装できる。

React 開発用Dockerを作成

前回作成したnginxのイメージからDockerを建てる

docker run --name nginx -d -p 10080:80 ytsuboi/nginx:1.0

node.jsのインストール

yumを使って、node.jsのインストールを行う。これでnpmコマンドが使用可能になる。
npmはjavascript用のパッケージ管理ツールで、RubyのRubyGems。PythonのPipにあたる。

yum install -y epel-release
yum install -y nodejs npm

create-react-appでReactのアプリケーションを作成

これでnodejsを使う準備ができたので、React用のライブラリをインストールして、初期アプリケーションを作成する。
初期アプリケーションの作成にはcreate-react-appを利用する。
この手順の通り、Reactの新規アプリケーションを作成する際に使えるツール。

npm install -g create-react-app
create-react-app <application name>

<application name>でフォルダが作成されると思うが、その中のファイルを編集してReactのアプリを作成していく。
今回はこのままでアプリを動かしてみる。
ちなみに、buildせずにnpm startで動かすには、まずnginxを止めてから80ポートで起動してあげれば外部から10080ポートでアクセスできる。

sysatemctl stop nginx
PORT=80 npm start

アプリケーションのビルド

実環境で動作させる場合には、開発したReactのアプリケーションをビルドする必要がある。
npm run buildを行うと、/build/フォルダが作成される。
このフォルダをnginx上で公開することでReactのwebアプリケーションにアクセスができるようになる。

npm run build

ビルドしたアプリケーションを/var/www/<application name>にコピーする。

mkdir /var/www
cp -r build /var/www/<application name>

nginx上で動かす

nginx上でVirtualHostを作成する。
編集するファイルは/etc/nginx/conf.d/default.confを用いる。
公開するフォルダを/var/www/<application name>とするとnginxの設定は以下のようになる。

server {
    listen       80 default_server;
    root /var/www/<application name>;
    server_name  localhost;

    access_log  /var/log/nginx/host.access.log  main;
    index index.html index.htm;

}

今回は簡単な設定だけを記載。
80ポートに来たHTTPのリクエストは/var/www/<application name>配下のファイルを返す。
ファイル名を指定しない場合には、デフォルトでindex.htmlまたはindex.htmを返す。

設定が完了したらnginxを再起動する。

systemctl restart nginx

外部からホストのIPとポートでアクセスして次の画面が出れば成功。

React App

おわり

nginx上で公開する方法がわかったので、次はNode.jsを使ってmongoDBにアクセスするところをやっていこう。
これらの設定やアプリケーションをコンテナ化するのはまたその後で。

Nginx/React/Express/MongoDB on Docker の構築 その2 Nginx

第二弾。次はnginxをDocker上に構築する。
やり方はMongoDBのときと一緒。

nginx

nginxはHTTPサーバやロードバランサー用途で使用可能なオープンソースソフトウェア。
ここに機能のまとめがあるが、
オープンソースバージョンでも、HTTPサーバとしての用途であれば十分な機能がサポートされている。
結局Apacheとどう違うの?という疑問がわく。ここに簡単な比較がある。
大きな違いとしてはApacheはプロセスベースに対し、nginxは非同期のイベント駆動型であるということ。VPSなどの限られた環境下においては、オーバヘッドの少ないイベント駆動型のnginxなどが適しているということらしい。
ちなみに読み方はエンジンエックスなので。お気をつけ。

CentOSのDockerを建てる。

前回記事を参照。

$ docker run -itd --privileged --name nginx centos:7 /sbin/init
3dc3e9021f943139eac03d3e37a7252a094371b42a51b876893d039ea0bf2f53

nginxのインストール

インストールはここを参照
基本的な流れ
– レポジトリの追加
– yumを使ってインストール
– systemctlを使ってnginxを起動

レジストリの追加

$ docker exec -it nginx /bin/bash
[root@3dc3e9021f94 /]# cat << 'EOF' > /etc/yum.repos.d/nginx.repo
[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=0
enabled=1
EOF
[root@3dc3e9021f94 /]#
[root@3dc3e9021f94 /]# cat /etc/yum.repos.d/nginx.repo
[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=0
enabled=1
[root@3dc3e9021f94 /]#

yumを用いたnginxのインストール

[root@3dc3e9021f94 /]# yum install -y nginx

nginxの有効化

[root@3dc3e9021f94 /]# systemctl start nginx

nginxの確認

  • statusでactiveかどうか確認
  • curlで初期ページが返ってくるか確認
[root@3dc3e9021f94 /]# systemctl status nginx
● nginx.service - nginx - high performance web server
   Loaded: loaded (/usr/lib/systemd/system/nginx.service; disabled; vendor preset: disabled)
   Active: active (running) since Wed 2018-02-28 04:31:21 UTC; 1s ago
     Docs: http://nginx.org/en/docs/
  Process: 176 ExecStart=/usr/sbin/nginx -c /etc/nginx/nginx.conf (code=exited, status=0/SUCCESS)
  Process: 175 ExecStartPre=/usr/sbin/nginx -t -c /etc/nginx/nginx.conf (code=exited, status=0/SUCCESS)
 Main PID: 177 (nginx)
   CGroup: /system.slice/docker-3dc3e9021f943139eac03d3e37a7252a094371b42a51b876893d039ea0bf2f53.scope/system.slice/nginx.service
           ├─177 nginx: master process /usr/sbin/nginx -c /etc/nginx/nginx.conf
           └─178 nginx: worker process

Feb 28 04:31:21 3dc3e9021f94 systemd[1]: Starting nginx - high performance web server...
Feb 28 04:31:21 3dc3e9021f94 nginx[175]: nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
Feb 28 04:31:21 3dc3e9021f94 nginx[175]: nginx: configuration file /etc/nginx/nginx.conf test is successful
Feb 28 04:31:21 3dc3e9021f94 systemd[1]: Failed to read PID from file /var/run/nginx.pid: Invalid argument
Feb 28 04:31:21 3dc3e9021f94 systemd[1]: Started nginx - high performance web server.
[root@3dc3e9021f94 /]#
[root@3dc3e9021f94 /]# curl http://localhost/
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
    body {
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }
</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>

<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>

<p><em>Thank you for using nginx.</em></p>
</body>
</html>
[root@3dc3e9021f94 /]#

次にDockerfileからイメージをビルドするので、使用していたcentosのコンテナを削除する

$ docker kill nginx
nginx
$ docker rm nginx
nginx

nginx用Dockerfileの作成

MongoDBのときと同様に使用したコマンドをDockerfileに書いていくだけ。
ちなみにDockerfilenの中では、ヒアドキュメントが使えないのでechoに書き換えている。

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

# Enable nginx
RUN systemctl enable nginx

# Start init daemon
CMD ["/sbin/init"]
$ docker build -t ytsuboi/nginx:1.0 .
Sending build context to Docker daemon  2.56 kB
Step 1 : FROM centos:7
 ---> ff426288ea90
Step 2 : MAINTAINER "yuki"
 ---> Running in ca8d4bff0980
<snip>
Successfully built 1d391618c76c
[ytsuboi@cent:nginx] $

nginx dockerの起動

ローカルの10080ポートをnginxのコンテナのポート80に割り当てて、外部からアクセスするようにする。
使用するのはdocker runの以下のオプション。

  -p, --publish value               Publish a container's port(s) to the host (default [])

起動してみる

$ docker run --name nginx -d -p 10080:80 ytsuboi/nginx:1.0

起動後にコンテナを起動したホストから10080ポートにアクセスできるか確認。

 $ curl http://localhost:10080
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
    body {
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }
</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>

<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>

<p><em>Thank you for using nginx.</em></p>
</body>
</html>

ちなみに、iptablesssからポートが空いていることと、DNATされていることも確認できる。

$ ss -tln
State       Recv-Q Send-Q                      Local Address:Port                                     Peer Address:Port
<snip>
LISTEN      0      128                                    :::10080                                              :::*
$ sudo iptables -n -L DOCKER -t nat
Chain DOCKER (2 references)
target     prot opt source               destination
RETURN     all  --  0.0.0.0/0            0.0.0.0/0
DNAT       tcp  --  0.0.0.0/0            0.0.0.0/0            tcp dpt:10080 to:172.17.0.5:80

おわり

これでnginxのコンテナが用意できた。ページや設定を変更するにはもう少し作業が必要だが今回は省く。
まずは、nginxが用意できたので、次回node.jsを動かす準備をする。