remrin

remrin

github
email
HomeArchives

Messing around with a blog

#Nginx#NextJs40
AI Translation
This post is translated from Chinese into English through AI.View Original
AI-generated summary
The person found a blog they liked on B station, checked out the Github repository, and saw a reference to Shiro. They planned to deploy the blog but realized they didn't have a domain server. They eventually bought a server and domain, faced some challenges with deployment, and had to use Docker for the front end. They shared their deployment process and mentioned using CloudFlare, Cloudcone, and Fastmail for domain, server, and domain email respectively. They also shared their Nginx reverse proxy configuration and how they resolved SSL certificate issues.

I saw a blog on Bilibili in the middle of the night, fuxiaochen, and found it quite interesting.

I checked the repository of this blog on Github and saw a reference to Shiro in the Readme.

I planned to deploy it in the middle of the night, but after thinking about it, I don't have a domain name server, so I decided to go to bed.

I woke up early in the morning and still wanted to work on the blog. I carefully read the deployment documentation and directly ordered a server 4H4G-220G, 55$/Year.

It still cost me a bit, plus the domain name remrin.dev 12$/Year.

My already not-so-wealthy wallet was hit even harder, but since I had already made the purchase, I decided to go ahead.

Fortunately, the deployment process was relatively simple with Docker Compose. I initially planned to deploy it on Vercel, but it kept failing.

Error Message

After checking the logs, it seems to be a BUG introduced in the latest commit. Fixed in #374

In a hurry to deploy, I had to use Docker for the blog's front end.

I won't go into detail about the deployment process, as this is not a tutorial article, but the end result is still good.

By the way, let me talk about my plan:

I initially used Certbot to apply for the certificate, but later found that CloudFlare can apply for it directly, so I used it instead.

The manual configuration of the Nginx reverse proxy mentioned in the tutorial is what I did.

There is a pitfall here. The certificate provided by CloudFlare cannot be used for regular SSL verification. It is only used for communication between the server and CloudFlare.

So you need to apply for the certificate using another method. I used Certbot for automatic application, but it can only be applied for 90 days at a time, so you need to configure automatic renewal yourself.

If you find that you can't access the Api after deploying the blog's front end due to certificate issues, you can temporarily solve it by adding a configuration in Server.js:

process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';

Then Reload the shiro service:

pm2 reload shiro

For those who manually configure the Nginx reverse proxy, you can refer to my configuration:

Blog Front End

server {

  listen 80;
  listen 443 ssl http2;

  ## Bind domain name
  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;
  }

  # You can use Certbot for automatic application, or manually apply and place it in a directory, and import it here
  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 side

server {

  listen 80;
  listen 443 ssl http2;

  ## Bind domain name
  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";

  ## Reverse proxy starts
  ## 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;
  }

  ## You can add a proxy for the management page
  location /xxx {
    proxy_pass http://127.0.0.1:2333/proxy/qaqdmin;
  }

  ## RSS address
  location ~* \/(feed|sitemap|atom.xml) {
    proxy_pass http://127.0.0.1:2333/$1;
  }
  ## Others
  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;
  }
  ## Reverse proxy ends

  # You can use Certbot for automatic application, or manually apply and place it in a directory, and import it here
  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;
}

That's it. If you need help, you can email me.

This article is synchronized and updated to xLog by Mix Space.
The original link is https://remrin.dev/posts/blog/1

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.