前端部署流程

记录一下前端项目部署到服务器的过程，需要部署的小伙伴可以参考一下

1、登录服务器

ssh root@94.191.22.222  # (root是角色，94.191.22.222是服务器)

可以在腾讯云或阿里云购买服务器和域名

2、安装nginx

yum install nginx
// 查看版本号
nginx -v

3、nginx相关命令

启动

systemctl start nginx.service

开机自启动

systemctl enable nginx.service

重启

nginx -s reload
//  或者 
systemctl restart nginx.service  

停用

nginx -s stop

4、nginx默认入口文件路径

/usr/share/nginx/html

可以在nginx的配置文件中修改默认入口文件的位置
nginx默认配置地址为：/etc/nginx/
nginx配置文件为：nginx.conf

5、将本地文件推到服务器

将本地目录的dist文件推送到94.191.22.222服务器的/usr/share/nginx/html文件夹下

scp -r ./dist/* root@94.191.22.222:/usr/share/nginx/html

推送完成后就可以在url中打开94.191.22.222查看是否部署上线

6、配置文件

配置文件中的：server

server {
    listen       80 default_server;
    listen       [::]:80 default_server;
    server_name  _;
    root         /usr/share/nginx/html/note;

    # Load configuration files for the default server block.
    include /etc/nginx/default.d/*.conf;

    location / {
    }

    location /note {
        rewrite  ^/note/(.*)  /$1 break;
    }

    error_page 404 /404.html;
        location = /40x.html {
    }

    error_page 500 502 503 504 /50x.html;
        location = /50x.html {
    }
}

这里的 server.root 表示的就是文件的根路径，前端项目打包好就上传到该文件夹下，直接访问域名就能访问页面了（94.191.22.222相当于绑定的域名，根目录就是/usr/share/nginx/html/note）。

7、路径重写

有的时候前端打包后的路径放到服务器上后就找不到资源了，这个时候就需要我们更改静态资源的路径，这里和正则的写法一样（作用是将 note 下面的以 /note/ 开头的替换为 /$1，就是将 /note 删除掉）

location /note {
    rewrite  ^/note/(.*)  /$1 break;
}

location /note指示该规则仅适用于以/note开头的URL，然后rewrite ^/note/(.*) /$1 break;表示将匹配到的URL从/note/xxx重写为/xxx，其中$1代表匹配到的(.*)部分。

例如，对于URL http://example.com/note/some-page，将被重写为 http://example.com/some-page。

break指令表示停止搜索其他匹配的规则，并且在完成重写后终止当前请求的处理。