<p>みなさんこんにちは</p>
<h1 id="%E6%9C%AC%E6%97%A5%E3%81%AE%E3%81%8A%E9%A1%8C">
<a class="header-anchor-link" href="#%E6%9C%AC%E6%97%A5%E3%81%AE%E3%81%8A%E9%A1%8C" aria-hidden="true"></a> 本日のお題</h1>
<p>Web アプリを作るに当たって、Webアプリケーションを動作させるためのサーバーが必要です。<br>
今回はとりあえず、NGINXで構築します。<br>
少し期間が空きましたが、風邪ひいたり、仕事が忙しかったり、node.jsでもたついたりと、お時間をいただくことになってしましました。</p>
<h1 id="nginx%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#nginx%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> NGINXのインストール</h1>
<p>dockerに導入するにあたり、docker hubから導入させていただこうと思います。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__a3479590c1d81" src="https://embed.zenn.studio/card#zenn-embedded__a3479590c1d81" data-content="https%3A%2F%2Fhub.docker.com%2F_%2Fnginx" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://hub.docker.com/_/nginx" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://hub.docker.com/_/nginx</a></p>
<div class="code-block-container"><pre><code>[root@meet nginx]# pwd
/opt/nginx
[root@meet nginx]# ls
[root@meet nginx]# docker pull nginx
Using default tag: latest
latest: Pulling from library/nginx
5eb5b503b376: Pull complete
1ae07ab881bd: Pull complete
78091884b7be: Pull complete
091c283c6a66: Pull complete
55de5851019b: Pull complete
b559bad762be: Pull complete
Digest: sha256:2834dc507516af02784808c5f48b7cbe38b8ed5d0f4837f16e78d00deb7e7767
Status: Downloaded newer image for nginx:latest
docker.io/library/nginx:latest

[root@meet nginx]# docker images
REPOSITORY      TAG             IMAGE ID       CREATED       SIZE
nginx           latest          c316d5a335a5   4 days ago    142MB
[root@meet nginx]#
</code></pre></div><h1 id="docker-compose-%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90">
<a class="header-anchor-link" href="#docker-compose-%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90" aria-hidden="true"></a> docker-compose ファイルの作成</h1>
<p>volumesで設定に必要なゲストOS上のファイルを、ホストOSに連結します。</p>
<div class="code-block-container"><pre><code>[root@meet nginx]# pwd
/opt/nginx
[root@meet nginx]# ls
default.conf  docker-compose.yml  html

[root@meet nginx]# vi docker-compose.yml
version: "3"
services:
  nginx:
    image: nginx:latest
    container_name: nginx
    ports:
      - "8443:443"
    volumes:
      # NGINXのコンフィグファイルをホストOSから、ゲストOSに連結する
      - ./default.conf:/etc/nginx/conf.d/default.conf
      # HTTPS用の証明書とキーをホストOSから、ゲストOSに連結する
      - /home/yukkuri/certificates/yukkuri.me.crt:/etc/nginx/conf.d/yukkuri.me.crt:Z
      - /home/yukkuri/certificates/yukkuri.me.key:/etc/nginx/conf.d/yukkuri.me.key:Z
      # NGINXのWebアプリ（index.html等）をホストOSから、ゲストOSに連結する
      - ./html:/usr/share/nginx/html
</code></pre></div><h1 id="nginx%E7%94%A8%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%95%E3%82%A3%E3%82%B0%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB">
<a class="header-anchor-link" href="#nginx%E7%94%A8%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%95%E3%82%A3%E3%82%B0%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB" aria-hidden="true"></a> NGINX用のコンフィグファイル</h1>
<p>NGINX用のコンフィグファイルは、ホストOS上で設定変更できるようにしてあるので、<br>
ホストOS上のファイルで設定します。</p>
<div class="code-block-container"><pre><code>[root@meet nginx]# pwd
/opt/nginx
[root@meet nginx]# ls
default.conf  docker-compose.yml  html

[root@meet nginx]# vi default.conf
server {
    # HTTPSを利用する設定
    listen       443 ssl;
    server_name  localhost;
    # ゲストOS上の証明書とキー配置設定
    ssl_certificate      /etc/nginx/conf.d/yukkuri.me.crt;
    ssl_certificate_key  /etc/nginx/conf.d/yukkuri.me.key;
    location / {
        # ゲストOS上のWebアプリ（index.html等）カレントディレクトリ
        root /usr/share/nginx/html;
    }
}
</code></pre></div><h1 id="%E3%83%86%E3%82%B9%E3%83%88%E7%94%A8%E3%81%AB%E3%80%81index.html%E3%82%92%E4%BD%9C%E6%88%90">
<a class="header-anchor-link" href="#%E3%83%86%E3%82%B9%E3%83%88%E7%94%A8%E3%81%AB%E3%80%81index.html%E3%82%92%E4%BD%9C%E6%88%90" aria-hidden="true"></a> テスト用に、index.htmlを作成</h1>
<p>Webアプリ（index.html等）カレントディレクトリに初期ファイルを配置する。</p>
<div class="code-block-container"><pre><code>[root@meet nginx]# pwd
/opt/nginx
[root@meet nginx]# ls
default.conf  docker-compose.yml  html

[root@meet nginx]# vi ./html/index.html
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;yukkuri.me&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;yukkuri shiteitte ne !!!&lt;/p&gt;
&lt;p&gt;&lt;image src="./img/NiceBoat.png"&gt;&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre></div><h1 id="%E8%B5%B7%E5%8B%95">
<a class="header-anchor-link" href="#%E8%B5%B7%E5%8B%95" aria-hidden="true"></a> 起動</h1>
<p>テスト起動してみます。<br>
動いているみたい。</p>
<div class="code-block-container"><pre><code>[root@meet nginx]# docker-compose up
[+] Running 1/0
 ⠿ Container nginx  Created                                                                            0.0s
Attaching to nginx
nginx  | /docker-entrypoint.sh: /docker-entrypoint.d/ is not empty, will attempt to perform configuration
nginx  | /docker-entrypoint.sh: Looking for shell scripts in /docker-entrypoint.d/
nginx  | /docker-entrypoint.sh: Launching /docker-entrypoint.d/10-listen-on-ipv6-by-default.sh
nginx  | 10-listen-on-ipv6-by-default.sh: info: Getting the checksum of /etc/nginx/conf.d/default.conf
nginx  | 10-listen-on-ipv6-by-default.sh: info: /etc/nginx/conf.d/default.conf differs from the packaged version
nginx  | /docker-entrypoint.sh: Launching /docker-entrypoint.d/20-envsubst-on-templates.sh
nginx  | /docker-entrypoint.sh: Launching /docker-entrypoint.d/30-tune-worker-processes.sh
nginx  | /docker-entrypoint.sh: Configuration complete; ready for start up
nginx  | 2022/01/30 15:28:53 [notice] 1#1: using the "epoll" event method
nginx  | 2022/01/30 15:28:53 [notice] 1#1: nginx/1.21.6
nginx  | 2022/01/30 15:28:53 [notice] 1#1: built by gcc 10.2.1 20210110 (Debian 10.2.1-6)
nginx  | 2022/01/30 15:28:53 [notice] 1#1: OS: Linux 5.10.82-83.359.amzn2.x86_64
nginx  | 2022/01/30 15:28:53 [notice] 1#1: getrlimit(RLIMIT_NOFILE): 32768:65536
nginx  | 2022/01/30 15:28:53 [notice] 1#1: start worker processes
nginx  | 2022/01/30 15:28:53 [notice] 1#1: start worker process 30
</code></pre></div><h1 id="%E6%8E%A5%E7%B6%9A%E7%A2%BA%E8%AA%8D">
<a class="header-anchor-link" href="#%E6%8E%A5%E7%B6%9A%E7%A2%BA%E8%AA%8D" aria-hidden="true"></a> 接続確認</h1>
<p>ブラウザからHTTPS（今回はJitsiと同じサーバーなので、8443がNGINXのHTTPSのPORT）で接続して、つながればOK。<br>
AWS上からは、Route53 でwww.yukkuri.me のサブドメイン設定と、セキュリティグループに8443ポートの穴あけをやっています。<br>
ブラウザ上から、8443とするのがいまいちなので、次回は、ALBでいい感じに振り分けていきたいと考えています。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/416ae07cf20b-20220131.png" alt loading="lazy" class="md-img"></p>
<h1 id="%E4%BB%8A%E5%BE%8C%E3%81%AE%E8%AA%B2%E9%A1%8C">
<a class="header-anchor-link" href="#%E4%BB%8A%E5%BE%8C%E3%81%AE%E8%AA%B2%E9%A1%8C" aria-hidden="true"></a> 今後の課題</h1>
<p>ここに、MySQLと接続するWebアプリを作っていきたいと思います。</p>
<h1 id="%E4%BB%8A%E5%9B%9E%E3%81%AE%E6%89%80%E8%A6%81%E6%99%82%E9%96%93">
<a class="header-anchor-link" href="#%E4%BB%8A%E5%9B%9E%E3%81%AE%E6%89%80%E8%A6%81%E6%99%82%E9%96%93" aria-hidden="true"></a> 今回の所要時間</h1>
<p>3時間くらいですか。。。<br>
NGINXの前にnode.jsで似たようなことをやっていたのですが、こっちは数日悩んで、HTTPSで構築するのに手間取ったりを繰り返して、悩みに悩んで、最終的に横の人に、「NGINXで良くないですかね。」と言われて考え直しました。<br>
※node.jsはそのうち解析します。</p>


NGINXをdocker-composeで構築し、HTTPSで公開する

Discussion