前端项目部署方法
ngnix服务器部署
下载nignx，我下的是windows版本的 下载链接：[https://nginx.org/en/download.html](https://nginx.org/en/download.html)
解压文件
如果原本的80端口号被占用了，可以改为其他的端口号
可以点击nginx.exe文件启动nginx,它可能会弹出一个提示是否允许，然后会闪一下
也可以使用如下命令（但是要cd到nignx目录下）
start nginx
其他nginx命令
查找所有nginx进程
tasklist /fi "imagename eq nginx.exe"
关闭所有nginx进程
taskkill /f /im nginx.exe
修改nginx配置文件后重启nginx进程
nginx.exe -s reload
windows ngnix常用命令
然后再浏览器输入localhost+端口号，出现下面这张图表示nginx启动成功
项目部署的时候会出现两个问题
第一个问题：刷新页面404
解决：
- 使用hash路由
- 使用historyl路由时，需要后端做配置，如果没有做配置无法匹配后端路由时，返回Index.html
第二个问题：
无法发起ajax请求，会出现跨域问题
打包项目代码，然后把nginx.conf文件里面的地址换成dist文件的地址
然后重启nginx，再刷新页面就可以看到项目的页面
再次刷新页面就会出现404 Not Found的问题，追加nginx配置来解决，
追加 try_files $uri $uri/ /index.html;表示当无法匹配资源时，返回index.html
然后关闭nginx,重启nginx，重新刷新页面即可，不会在出现404的问题
location / {root D:\文档1\前端\dist;index index.html index.htm;try_files $uri $uri/ /index.html; # 解决刷新404}还有一个问题就是无法发送请求，会出现跨域问题
需要再添加一个配置，来解决跨域问题
# 配置代理
location /prod-api {# 设置代理目标 proxy_pass https://heimahr.itheima.net;#这里是
}这个 Nginx 配置片段主要用于 反向代理，将客户端请求转发到指定的目标服务器。下面是逐项解释：
**location /prod-api**
location是 Nginx 中用于匹配请求 URI 的指令。/prod-api是请求路径的匹配模式。具体来说，它会匹配所有以/prod-api开头的请求路径。举个例子，如果用户访问http://yourdomain.com/prod-api/some-endpoint，这个location配置就会被触发。- 在这里，Nginx 会根据配置将匹配
/prod-api的请求代理到指定的服务器。
**proxy_pass https://heimahr.itheima.net;**
proxy_pass是 Nginx 中用于配置反向代理的指令。- 这里，
proxy_pass https://heimahr.itheima.net;表示将匹配/prod-api路径的请求转发到https://heimahr.itheima.net。 - 当请求被转发时，原始请求的路径部分（即
/prod-api/some-endpoint）将附加到目标 URL 后面，转发请求到目标服务器。例如，http://yourdomain.com/prod-api/some-endpoint会被转发为https://heimahr.itheima.net/prod-api/some-endpoint。
3. 代理的工作原理
- 反向代理：Nginx 会作为一个中间层，接收客户端（如浏览器）发送的请求，然后将这些请求转发给目标服务器（这里是
https://heimahr.itheima.net）。目标服务器处理请求并将响应返回给 Nginx，Nginx 再将响应发送给客户端。 - 目的：反向代理常用于负载均衡、API 网关、保护后端服务器等场景。
发起了请求
云服务器部署
我们可以在云服务器上借助`nginx`完成部署，大致流程与本地`nginx`部署一致- 关于购买云服务器，可选择：阿里云、腾讯云等。
- 关于操作系统，看个人习惯，Ubuntu、CentOs、RedHat、都不错。
- linux 远程操作软件：FinallShell（更方便）或者用Xshell、Xftp结合使用
- 具体配置如下：
- 给服务器安装
nginx
yum install nginx
- 将打包后的前端资源放在：
/html文件夹创建的新文件夹中或者其他的文件夹中。 - 使用
FinallShell配置服务器的 nginx，修改文件：/etc/nginx/nginx.config。
# For more information on configuration, see:
# * Official English Documentation: http://nginx.org/en/docs/
# * Official Russian Documentation: http://nginx.org/ru/docs/user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;events {worker_connections 1024;
}http {log_format main '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_referer" ''"$http_user_agent" "$http_x_forwarded_for"';access_log /var/log/nginx/access.log main;sendfile on;tcp_nopush on;tcp_nodelay on;keepalive_timeout 65;types_hash_max_size 2048;include /etc/nginx/mime.types;default_type application/octet-stream;# Load modular configuration files from the /etc/nginx/conf.d directory.# See http://nginx.org/en/docs/ngx_core_module.html#include# for more information.include /etc/nginx/conf.d/*.conf;server {listen 80 default_server;listen [::]:80 default_server;server_name _;root /usr/share/nginx/html;# Load configuration files for the default server block.include /etc/nginx/default.d/*.conf;location / {root /usr/local/nginx/html;#你存放资源的位置路径index index.html index.htm;try_files $uri $uri/ /index.html; # 解决刷新404}# 配置代理location /dev/ {# 设置代理目标proxy_pass http(s)://xxxxxxxxxx/;#请求资源的服务器地址}error_page 404 /404.html;location = /40x.html {}error_page 500 502 503 504 /50x.html;location = /50x.html {}}
}