html + css + docker + alpine nginx + Let's encrypt でポートフォリオを作った

5046 ワード
nginx HTML letsencrypt CSS Docker HTML テキストリンク

追記

https-portal でポートフォリオつくってみた
下の作業は全て不要になりました。

作った背景

私もそろそろ就活生ですので、インターンに必要なポートフォリオを作成せねば。
ということでせっかくなら1からやってみたい(と言いつつHTMLとCSSはテンプレを使用しましたが)
ので表題の言語やツールを使い実装してみました。

環境

  • CentOS (ここはなんのOSでもよいと)
  • Docker (version 18.X)
  • docker-compose (version 1.18.0)

HTML + CSS について

エンジニアでポートフォリオ作りました
こちらの記事を参考にポートフォリオを作りました。
基本的なHTMLとCSSなので内容の説明は省きます。

ディレクトリ構造について

tree
.
├── docker-compose.yaml
├── portfolio
│   ├── css
│   ├── img
│   ├── index.html
│   └── js
└── web
    └── default.conf

portfolio内に作成したHTML,CSS諸々を入れておきます。

nginx

最低限の記述のみ行っています。
これがあればSSL通信まで行えます。
example.comは自分のドメインに書き換えてください。

default.conf
server {
  listen 80;
  server_name example.com;
  return 301 https://$host$request_uri;
}

server {
  listen 443 ssl;

  ssl_certificate     /etc/letsencrypt/live/example.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
  server_name example.com;

  root  /var/www/html;
  index index.html;

  access_log /var/log/nginx/access.log;
  error_log  /var/log/nginx/error.log;
}

docker

docker-compose.yaml
version: '3'
services:
  web:
    image: nginx:1.13.5-alpine
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./web/default.conf:/etc/nginx/conf.d/default.conf
      - ./portfolio:/var/www/html

docker-composeの記述内容がわからない方はたくさんわかりやすい記事があるのでググってください。

dockerコンテナにexecコマンドで入ります。
(shellがashなのに最初困惑しました...)
(本当はDockerfileに全部記述してやりたいので今後直します。)

$ apk update && apk add certbot
$ certbot certonly --webroot -w /var/www/html/ -d example.com -m [email protected]
$ echo '0 0 * * 3 certbot renew' > /var/spool/cron/crontabs/root && crond -l 2 -f

あとはexample.comにアクセスしてSSL通信できているか確認してください。

お疲れ様でした。
(ぜひここらへん強い方はご教授おねがいします)