记录一下前端手动部署服务器

1、服务器配置

（1）、首先在部署前端的时候，你要先看一下服务器的默认d的安全组是哪一个，我买的是华为云，有两个安全组，一个是sg-default-smb，一个是default，我一直以为默认绑定的安全组是default，然后我就在这个安全组上面开端口，但是永远也访问不到。原来它默认的绑定的安全组是sg-default-smb，所以一定要先看好默认绑定的安全组是哪个。

（2）、开通端口

        在网络控制台台面找到安全组，找到服务器绑定的安全组，点进去，会有5个tab页

点击入方向规则---->添加规则

只填写这3处就可以了。

2、安装nginx

（1）、输入账户，密码

在使用终端工具，我用的是xshell，链接你的公网地址，及端口，输入账户密码后，会进入这个页面

（2）、输入命令 apt install nginx（ubuntu系统），安装ngnix，安装好之后，检查是否成功，输入命令

nginx -t,出现 ok 或者is success，说明安装成功。

（3）、创建你所需要的config文件，

路径 /etc/nginx/conf.d 下新建index.config

内容：

server {
  listen 你开通的端口号;
  server_name 公网ip地址;（如果有域名，直接替换成域名）
  error_page  404 /index.html;
  client_max_body_size 100m;

  location / {
      root /opt/website/dist/; # 前端代码文件位置，不要加index.html
      index index.html;
      try_files $uri $uri/ /index.html; # 解决vue刷新404的问题
  }
    #如果有其他文件地址，可以代理其他地址
  location /video/ {
      alias /opt/video/; # 其他文件位置
      # index index.html;
      autoindex on;  
      # try_files $uri $uri/ /index.html; # 解决vue刷新404的问题
  }
}
  

（4）、重启nginx，命令

nginx -s reload 或者 service nginx restart

(5)、如果没有报错，说明启动成功，访问你所开通的那个地址，ip:端口，就会出现nginx 404页面，说明成功了。

（6）、将你打包好的dist文件夹，上传到相应的文件夹下，重新启动nginx。就可以了。

后续会在讲一下CI/CD,前端自动部署流程的。