ブログをちょっといじる

半夜に B サイトでブログ fuxiaochen を見つけて、なかなか良さそうだと思った。

このブログのリポジトリ Github をちらっと見て、Readmeの中で Shiro を参考にしているのを見つけた。

半夜に起きてデプロイしようと思ったが、ドメインサーバーがないことに気づき、やっぱり寝ることにした。

朝早く目が覚めて、ブログのことをやりたいと思い、デプロイドキュメントをじっくり読んで、サーバーを直接注文した 4H4G-220G, 55$/Year。

ちょっと痛い出費だが、ドメイン remrin.dev 12$/Year も追加した。

もともと裕福ではない財布がさらに厳しくなり、買ったからにはすぐに始めることにした。

幸い、デプロイは比較的簡単で、Docker compose で一気に進め、Vercel へのデプロイを計画したが、ずっとデプロイに失敗した。

エラーメッセージ

~~ログを見たところ、最近のコミットで導入された BUG のようだ~~ 修正済み #374

デプロイが急がれているため、ブログのフロントエンドも Docker を使うしかなかった。

デプロイの過程は詳しくは述べないが、チュートリアル記事ではないので、最終的な成果はなかなか良かった。

ついでに私のプランを紹介する。

ドメイン証明書 CloudFlare
サーバー Cloudcone
ドメインメール Fastmail

最初は Certbot を使って証明書を申請したが、後で CloudFlare で直接申請できることに気づき、そちらを使うことにした。

チュートリアルの手書き Nginx リバースプロキシのことは私のことだ。

ここで一つ注意点を言っておくと、CloudFlare が提供する証明書は通常の SSL 検証には使えず、サーバーと CloudFlare の通信にのみ使用される。

そのため、他の方法で証明書を申請する必要があり、私は Cretbot を使って自動申請しているが、一度に 90 日間しか申請できず、自動更新の設定を自分で行う必要がある。

もしブログのフロントエンドをデプロイした後に Api にアクセスできず、証明書の問題が表示された場合、Server.js に設定を追加することで一時的に解決できる。

process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';```

その後、`shiro` サービスを `Reload` する。

```shell
pm2 reload shiro

手書きの Nginx リバースプロキシ設定については、私の設定を参考にしてほしい。

ブログフロントエンド

server {

  listen 80;
  listen 443 ssl http2;

  ## ドメインをバインド
  server_name xxx.com;
  index index.html;
  proxy_set_header Host $host;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_set_header X-Forwarded-Host $server_name;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";

  location ~* \.(gif|png|jpg|css|js|woff|woff2)$ {
    proxy_pass http://127.0.0.1:2323;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    expires 30d;
  }
  location ~* \/(feed|sitemap|atom.xml) {
    proxy_pass http://127.0.0.1:2333/$1;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    add_header X-Cache $upstream_cache_status;
    add_header Cache-Control max-age=60;
  }

  location / {
    proxy_pass http://127.0.0.1:2323;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    add_header X-Cache $upstream_cache_status;
    add_header Cache-Control no-cache;
    proxy_intercept_errors on;
  }

  # Certbotを使って自動申請するか、手動で申請したものを特定のディレクトリに置いてここで参照する
  ssl_certificate /root/ssl/xxx.pem;
  ssl_certificate_key /root/ssl/xxx.key;

  ssl_protocols TLSv1.3 TLSv1.2 TLSv1.1 TLSv1;
  ssl_ciphers 'ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA:ECDHE-ECDSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:AES:CAMELLIA:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!3DES:!MD5:!PSK';
  ssl_prefer_server_ciphers on;
  ssl_session_cache shared:SSL:10m;
  ssl_session_timeout 10m;
  error_page 497 https://$host$request_uri;
}

サーバー側

server {

  listen 80;
  listen 443 ssl http2;

  ## ドメインをバインド
  server_name server.xxx.com;
  index index.html;
  proxy_set_header Host $host;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_set_header X-Forwarded-Host $server_name;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";

  ## リバースプロキシ開始
  ## WebSocket
  location /socket.io {
    proxy_pass http://127.0.0.1:2333/socket.io;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_buffering off;
    proxy_http_version 1.1;
    add_header Cache-Control no-cache;
  }

  ## 管理ページにプロキシを追加することもできる
  location /xxx {
    proxy_pass http://127.0.0.1:2333/proxy/qaqdmin;
  }

  ## RSS アドレス
  location ~* \/(feed|sitemap|atom.xml) {
    proxy_pass http://127.0.0.1:2333/$1;
  }
  ## その他
  location / {
    proxy_pass http://127.0.0.1:2333;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    add_header X-Cache $upstream_cache_status;
  }
  ## リバースプロキシ終了

  # Certbotを使って自動申請するか、手動で申請したものを特定のディレクトリに置いてここで参照する
  ssl_certificate /root/ssl/xxx.pem;
  ssl_certificate_key /root/ssl/xxx.key;

  ssl_protocols TLSv1.3 TLSv1.2 TLSv1.1 TLSv1;
  ssl_ciphers 'ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA:ECDHE-ECDSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:AES:CAMELLIA:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!3DES:!MD5:!PSK';
  ssl_prefer_server_ciphers on;
  ssl_session_cache shared:SSL:10m;
  ssl_session_timeout 10m;
  error_page 497 https://$host$request_uri;
}

こんな感じで、助けが必要な場合はメールで連絡してください。

この記事は Mix Space によって xLog に同期更新されました。原始リンクは https://remrin.dev/posts/blog/1