Lightsailにブログをホストした時のやったこと

2022-07-21

Lightsailを契約

メモリ1GBじゃないとnpm run buildできなかったので、1GBにしました。

apt周りの整理

VPS借りたら最初にやることをやった

gitの設定

sshなどの設定まわりをやった

gitからアプリをclone

した

nginxいれた

nginxいれて、自分のドメインと紐づけて、cloneしてきたアプリをビルトしたものをみるようにした。

SSL化

certbot使った。 sudo apt install certbot python3-certbot-nginx

sudo certbot --nginx -d hoge.com

443のファイアーウォール開けた

Lightsail側で443httpsのファイアーウォール開けた

github actionsを設定する

github側に環境変数のsecretsを設定した rsyncでビルド済みのものをデプロイしたい burnett01/rsync-deploymentsを使用する。 https://github.com/Burnett01/rsync-deployments

書いたyamlファイルは以下の通り

name: deploy
on:
  push:
    branches: [ master ]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - run: npm install
      - run: npm run build
      - name: rsync deployments
        uses: burnett01/rsync-deployments@5.2
        with:
          switches: -avzr --delete
          path: out/
          remote_path: ${{ secrets.DEPLOY_DIR }}
          remote_host: ${{ secrets.DEPLOY_HOST }}
          remote_user: ${{ secrets.DEPLOY_USER }}
          remote_key: ${{ secrets.DEPLOY_KEY }}

nginxのlocationを設定する

例えば、hoge.com/article/4というURLでアクセスきたときに、article/4.htmlというファイルを参照するよう設定する。 /etc/nginx/conf.d/default.conf にて

location / {
        root   /home/ubuntu/src/blog/out;
        index  index.html index.htm;
        try_files $uri.html @proxy;
    }
location @proxy {
  internal;
  root   /home/ubuntu/src/blog/out;
  index  index.html index.htm;
}

try_filesを設定することで、URL末尾.htmlを取得してくれるよう設定した。

404ページを、nginxのものからnext.jsのものにする 同様に /etc/nginx/conf.d/default.conf にて

error_page  404 /404.html;
location = /404.html {
    internal;
    root /home/ubuntu/src/blog/out;
}

という設定をする。