docker部署博客系统（一. vue3、nginx部署）

前端部署（vue3、nginx）

1. pnpm build拿到dist静态包，如下图

2. 准备nginx配置文件、证书等（如果不走域名可以不用），docker安装minio，如下图

• store(blog)：静态资源（dist包内的文件）
• log：nginx日志
• conf.d(https.conf、minio.conf、cdn.conf)：nginx配置文件
• cert：存放的证书
• nginx.conf：nginx公用配置
• install.sh：一键安装脚本
• https.conf如下

•   server {
      listen 80;
      server_name shizuka.icu;
      return 301 https://shizuka.icu/$request_uri;
    }
  
    server {
      listen 80;
      listen 443 ssl http2;
      server_name shizuka.icu;
      if ($server_port !~ 443){
          rewrite ^(/.*)$ https://$host$1/dashboard permanent;
      }
  
      ssl_certificate cert/shizuka.icu.pem;  
      ssl_certificate_key cert/shizuka.icu.key; ssl_session_timeout 5m;
      ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
      ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_prefer_server_ciphers on;
  
      location / {
          root /usr/share/nginx/blog/;
          try_files $uri $uri/ /index.html;
          index index.html;
      }
  
      location /status {
          stub_status on;
      }
  
      location /blog/api/v2/ {
          valid_referers shizuka.icu *.shizuka.icu;
          if ($invalid_referer) {
              return 403;
          }
  
          # forbidden Scrapy
    	    if ($http_user_agent ~* (Scrapy|Curl|HttpClient)) {
      	    return 200;
    	    }
  
    	    # forbidden UA
    	    if ($http_user_agent ~"Bytespider|FeedDemon|JikeSpider|Indy Library|Alexa Toolbar|AskTbFXTV|AhrefsBot|CrawlDaddy|CoolpadWebkit|Java|Feedly|UniversalFeedParser|ApacheBench|Microsoft URL Control|Swiftbot|ZmEu|oBot|jaunty|Python-urllib|python-requests|lightDeckReports Bot|YYSpider|DigExt|YisouSpider|HttpClient|MJ12bot|heritrix|EasouSpider|Ezooms|^$" ) {
      	    return 200;
    	}
  
    	# forbidden not GET|HEAD|POST method access
    	if ($request_method !~ ^(GET|HEAD|POST)$) {
      	     return 200;
    	}
  
          proxy_redirect off;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;  
          proxy_set_header REMOTE-HOST $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_pass http://shizuka.icu:9420;
      }
  
      location /cdn {
          valid_referers shizuka.icu *.shizuka.icu;
              if ($invalid_referer) {
                   return 403;
              }
              proxy_pass https://cdn.bili.icu;
      }
  
      location /img/static/ {
          valid_referers shizuka.icu *.shizuka.icu;
              if ($invalid_referer) {
                   return 403;
              }
              proxy_pass https://cdn.bili.icu/;
      }
    }
  

3. install.sh内容如下（拉取nginx镜像、创建nginx容器）

   docker pull nginx
   docker run -p 80:80 -p 443:443 --name nginx -v /usr/local/docker/install/nginx-install/store/:/usr/share/nginx/ -v /usr/local/docker/install/nginx-install/conf.d:/etc/nginx/conf.d/ -v /usr/local/docker/install/nginx-install/log:/var/log/nginx/ -v /usr/local/docker/install/nginx-install/cert:/etc/nginx/cert/ -v /usr/local/docker/install/nginx-install/nginx.conf:/etc/nginx/nginx.conf -d --restart=always nginx:latest
   

4. 欢迎访问个人博客（前后端分离独立开发，vue + nestjs）