4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

GCP+DockerでHTTPSな静的ページを公開する

Posted at

概要

なにかかっこいいのでポートフォリオサイトが欲しかったというのと,GCPとDockerまともに触ったことがなかったのでこういう風に公開しました.
これはポートフォリオに限らず,一般的な静的ページなら当てはめられます.

手順

1. ドメインを取得してIPと紐づける

僕はGoogleDomainsで取得して設定しました.

2. Google Compute Engine(GCE) のインスタンスを立てる

OSはdebian9を選択する.
httpとhttpsのportを開放することを忘れずに.

3. GCE 上に Docker をインストールする


$ apt-get install curl
$ curl -fsSL https://get.docker.com -o get-docker.sh
$ sudo sh get-docker.sh
$ systemctl start docker

4. GCE 上に git をインストールする

ローカルのソースコードを GCE 上にコピーします.


$ apt-get install git
$ git clone https://github.com/[Your Account]/[Your Repository].git

プライベートリポジトリなら,Githubに鍵登録をしましょう.
Github以外の方法でソースコードをコピーしても問題ありません.

ディレクトリ構成

.
├── Dockerfile
├── docker-compose.yml
└── src
    ├── css 
    ├── favicon.ico
    ├── img
    ├── index.html
    └── js

5. GCE 上に Docker で HTTPS な Nginx を立てる

https-portalを利用します.
https://github.com/SteveLTN/https-portal

これは普通はproxyとしてHTTPS化するものですが,今回はproxyとしてではなくhttp-portl自体のNginxから静的ファイルを配信します.
git でクローンしたディレクトリに入りイメージをビルドします.

公開したいテンプレートsrc/var/www/vhosts/www.[Your Domain].com/に配置しコンテナにコピーします.
srcを変更した場合、変更がそのまま反映されます.
こうすることで,imageをビルドしなおすことなくページ内容の変更を反映させることができます.

証明書をボリュームにマウントしておき永続化します.
コンテナを立ち上げるため証明書を取得すると発行制限がかかる場合があり,僕は1週間くらい発行することができなくなりました.


$ docker build ./ -t  portfolio-https
$ docker run -v {srcへの絶対パス}:/var/www/vhosts/www.[Your Domain].com/ -v /data/ssl_certs:/var/lib/https-portal -p 80:80 -p 443:443 portfolio-https

もしくは

docker-compose.yml

version: "3"

services:
  https-portal:
    image: steveltn/https-portal:1
    container_name: portfolio-https-portal
    ports:
      - "80:80"
      - "443:443"
    restart: always
    environment:
      STAGE: "production"
      DOMAINS: >-
        www.[Your Domain].com
    volumes:
      - ./src:/var/www/vhosts/www.[Your Domain].com
      - /data/ssl_certs:/var/lib/https-portal

docker-compose up -d

まとめ

以上の手順でページを公開できたと思います.

4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?