HTMLとかJavaScript（JQuery）とかでさくっと作ったものをEC2とかで公開する

Dockerを使ってNginxをベースに簡単なWebサーバーを構築してみます。環境はMac OSXでしたが、仮想OSを利用する必要はありません。NginxをDockerでセットアップすることに関連する記事は結構見かけたのですが、古かったりして意外と時間がかかったので簡単にまとめておきます。AWSのEC2などで公開する際も全く同様の手順でできます。

以下のような簡単なWebアプリケーションを作って公開してみました。（http://shuichi.tech）

構成

コードはここにおいています。元旦暇すぎてバーっと作ったのでコードの質はアレですが...。

/path/to/project.

.
├── Dockerfile
├── app
│   ├── css
│   │   └── main.css
│   ├── index.html
│   └── js
│       └── typed.js
└── sites-enabled
    └── default

最低限のファイル作成

まず Dockerfile から。今回 Ubuntu(17.04) を利用しました。

/path/to/project/Dockerfile.

# Getting Base Image
FROM ubuntu:17.04

# Author Info
MAINTAINER ngo275

RUN apt-get update && \
    apt-get install -y nginx && \
    apt-get clean && \
    rm -rf /var/lib/apt/lists/*

RUN echo "daemon off;" >> /etc/nginx/nginx.conf
ADD sites-enabled/ /etc/nginx/sites-enabled/
#ADD app/ /app/

EXPOSE 80

CMD ["/usr/sbin/nginx"]

次に設定ファイル（ /path/to/project/sites-enables/default ）です。

/path/to/project/sites-enables/default.

server {
    listen 80 default_server;
    listen [::]:80 default_server ipv6only=on;

    root /app;
    index index.html index.htm;

    server_name localhost;

    location / {
        try_files $uri $uri/ =404;
    }
}

そして path/to/project/index.html です。cssやjsを読み込む場合は以下のコメントの部分を適宜修正してください。ここでは一旦cssやjsなしで進めます。

/path/to/project/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    /*****ここはなくても良い.
    <link rel="shortcut icon" href="faviconのurl">
    <link rel="stylesheet" type="text/css" href="css/hoge.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script src="js/hoge.js"></script>
    ******/

</head>
<body>
    <h1>Hello World!!</h1>
</body>
</html>

Dockerを利用

Dockerをインストールしておきます。Mac OSXにインストールするならこのサイトが参考になります。また、EC2（Amazon linux）にインストールするなら以下のような手順です。

sudo rpm --import http://dl.fedoraproject.org/pub/epel/RPM-GPG-KEY-EPEL-6
sudo yum -y install http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm
sudo yum -y install docker-io
sudo service docker start
sudo chkconfig docker on

projectへのpathが /path/to/project であるとします。ここでは簡単のためにrootで実行します。

sudo su
cd /path/to/project
docker build -t nginx-app .
docker run -p 80:80 -d -v /path/to/project/app/:/app/ nginx-app

としてブラウザで http://localhost （もしEC2や仮想OSならそのIPアドレス）にアクセスするとindex.htmlがブラウザで確認できるはずです。

index.htmlやCSS, JavaScriptを編集してブラウザでリロードすると反映されます。

サーバーを停止したい時は docker ps -a で今動かしているプロセスを確認して、 docker stop CONTAINER ID したのち、 docker rm CONTAINER ID を実行します。

まとめ

Docker使うと簡単なWebアプリケーションなら、開発環境と同じようにしてすぐにデプロイできる。
ただし、DB用のコンテナを利用したり、と複雑になっていくと、こうも簡単にはいかなくなる。

Dockerを使ってものすごく簡単なサーバーを立ててみる（Nginx）

HTMLとかJavaScript（JQuery）とかでさくっと作ったものをEC2とかで公開する

構成

最低限のファイル作成

Dockerを利用

まとめ