发布博客

发布前需通过yarn add命令安装依赖

yarn run build
bash

image.png

发布后将dist目录上传至服务器上,路径可以自定义。
image.png

配置Nginx

  1. 进入nginx的conf.d配置目录。
    image.png

  2. 创建blog_admin.conf文件

vi blog_spa.conf
bash

将以下配置复制到blog_spa.conf文件中

注意修改配置中的域名和API端口

如果你不需要域名访问,只需要使用IP+端口访问,可将listen修改为其他未占用的端口,但不能设置为80端口(80端口默认被nginx占用),同时修改server_namelocalhost

server {
        listen       80;
	# 将以下域名修改为你自己的域名
        server_name www.okay123.top okay123.top;
	# 将以下路径修改为上文中`dist`所在路径
        root /home/www/backend/dist;
        location / {
             proxy_set_header Referer $host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header Host $host;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            try_files $uri $uri/ /index.html;
        }
        location /api {
             proxy_set_header Referer $host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header Host $host;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	     # 此端口为上一章部署的在Docker容器API开放的端口;如果你的API和前端不在同一服务器,需要将localhost修改为对应API的服务器IP或域名
             proxy_pass http://localhost:8001;
        }
}

json

重新加载Ngxin配置

nginx -s reload
bash

完成以上步骤就可以通过域名或IP加端口访问博客界面了。

重新发布

下次修改代码后,重新发布只需要将dist重新上传到服务器替换现有的dist目录即可。