VPS(Ubuntu 18.04)とdockerでnginxを動かしGatsby WEBサイトを公開

vps ubuntu docker nginx gatsby

2020/10/20

Author
小塩二郎

WEB工房しずおかの小塩です。

当サイトは脱WordPressを計り、WEBサイト構築方法やサーバー環境などの試行錯誤を行ってきました。最近、方針が落ち着き

VPS上に環境構築
OSはUbuntu 18.04
WEBサーバーはNginxでDockerにて構築
Gatsby.jsを使いビルドはVPS上で行う
複数人での開発に対応するためソースコードなどはすべてGitで管理
同時にステージング環境も準備する

という具合いになりました。

とても快適に運用ができていますので、紹介をさせてください。

ConoHa VPSの初期設定については、ConoHa VPS Ubuntu 18.04 での初期設定 Tera TermでSSH接続までをご覧ください。

Dockerでのややこしい権限問題を一切排除するため、以下root権限にて実行します。

su -

上記コマンドでrootユーザーに切り替えてください。

Dockerをインストール

必須パッケージインストール

apt update
apt install apt-transport-https ca-certificates curl software-properties-common
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"

docker コマンドインストール

apt update
apt-cache madison docker-ce
apt install docker-ce

インストール成功チェック

docker run hello-world

コマンド画面がごにょごにょと動き出し、

このような表示が現れれば、Dockerは無事にインストールされ正常動作をしています。

Node.jsをインストール

Node.jsのバージョンを指定したいため、nパッケージを導入する方法でやります。

apt update
apt install -y nodejs npm

まずは、通常通りNode.jsをインストールします。

npm install n -g

その後、nパッケージをインストール。

n stable

これで、最新版のNode.jsが入ります。

apt purge -y nodejs npm
exec $SHELL -l

最初に入れたnodejsとnpmを削除し、再ログインします。

node -v

バージョンが表示されればOKです。

Gatsby.jsをインストール

コマンドで1発です。

npm install -g gatsby-cli

本番サイトを作成

本番公開サイトのディレクトリ名をreleaseとします。処理に少し時間がかかります。

cd ~
gatsby new release https://github.com/gatsbyjs/gatsby-starter-blog
cd release
gatsby build
cd ..
chown username -R release

「username」の部分は、root以外の一般ユーザー名に置き換えてください。

stagingサイト作成

本番サイトと同様です。

cd ~
gatsby new staging https://github.com/gatsbyjs/gatsby-starter-blog
cd staging
gatsby build
cd ..
chown username -R staging

ここでも「username」の部分は、root以外の一般ユーザー名に置き換えてください。

stagingサイトにベーシック認証をかける

cd staging
mkdir nginx
cd nginx
apt install apache2-utils
htpasswd -c .htpasswd basicuser

「basicuser」はベーシック認証時のユーザ名です。適当なものに変更してください。

パスワードを求められます。ここで入力するものが、ベーシック認証時のパスワードです。

後にWEBサーバーであるnginxをdockerコンテナにて立ち上げます。「nginx」というディレクトリ名は、そのためです。

FTPコンテナを作成

cd ~
vi dc-ftp.yml

ホームディレクトリに移動し、新規でdc-ftp.ymlファイルを作成します。以下の内容を書き込んでください。

version: '3'

services:
  ftp:
    image: avenus/vsftpd-alpine
    container_name: 'ftp'
    ports:
      - "35000:21"
      - "21100-21110:21100-21110"
    volumes:
      - .:/home/username/
      - ./ftp/log:/var/log/
    environment:
      - FTP_USER=ftpuser
      - FTP_PASS=password
      - PASV_ADDRESS=xxx.xxx.xxx.xxx
      - PASV_MIN=21100
      - PASV_MAX=21110

ftpuser、passwordの部分は、適当なものに置き換えてください。FTPクライアントで使用します。

PASV_ADDRESSには、VPSのIPアドレスを入力してください。

FTPクライアントへの入力は、

ホスト：xxx.xxx.xxx.xxx（VPSのIPアドレス）
ユーザー名：ftpuser
パスワード：password
ポート：35000

ということになります。

以降、FTPが使えますので、Docker関連のファイルなどをローカルPCで作成しアップロードができます。

Nginxコンテナ作成

下準備として、Dockerのネットワークを作成しておきます。

docker network create release-network
docker network create staging-network

そして以下のようになるように、ファイルをFTPでアップロードします。

release/nginx/docker-compose.yml

ファイルの内容は、

version: '3'

services:
  nginx-release:
    image: nginx:1.15-alpine
    container_name: 'nginx-release'
    volumes:
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
      - ./public:/usr/share/nginx/html
    networks:
      - default
      - release-network
      
networks:
  release-network:
    external: true

release/nginx ディレクトリ内で

docker-compose up -d

を実行。

同様に、以下になるようにファイルをアップロード。

staging/nginx/docker-compose.yml

ファイルの内容は、

version: '3'

services:
  nginx-staging:
    image: nginx:1.15-alpine
    container_name: 'nginx-staging'
    volumes:
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
      - ./public:/usr/share/nginx/html
      - ./nginx/.htpasswd:/etc/nginx/.htpasswd
    networks:
      - default
      - staging-network
      
networks:
  staging-network:
    external: true

同様に、staging/nginx ディレクトリ内で

docker-compose up -d

を実行。

https-portal でリバースプロキシとSSL化

ホームディレクトリにあるdc-ftp.ymlの内容を以下に変えます。

version: '3'

services:
  ftp:
    image: avenus/vsftpd-alpine
    container_name: 'ftp'
    ports:
      - "35000:21"
      - "21100-21110:21100-21110"
    volumes:
      - .:/home/username/
      - ./ftp/log:/var/log/
    environment:
      - FTP_USER=ftpuser
      - FTP_PASS=password
      - PASV_ADDRESS=xxx.xxx.xxx.xxx
      - PASV_MIN=21100
      - PASV_MAX=21110
      
  https-portal:
    image: steveltn/https-portal:1
    container_name: 'https-portal'
    ports:
      - '80:80'
      - '443:443'
    environment:
      DOMAINS: 'site-domain.com -> http://nginx-release, stg.site-domain.com -> http://nginx-staging'
      STAGE: 'production'
      FORCE_RENEW: 'false'
    networks:
      - release-network
      - staging-network

networks:
  release-network:
    external: true
  staging-network:
    external: true

FTPコンテナの部分は、先ほどと同じ内容です。