前端项目部署方法

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 配置片段主要用于 反向代理，将客户端请求转发到指定的目标服务器。下面是逐项解释：

1. **location /prod-api**

• location 是 Nginx 中用于匹配请求 URI 的指令。
• /prod-api 是请求路径的匹配模式。具体来说，它会匹配所有以 /prod-api 开头的请求路径。举个例子，如果用户访问 http://yourdomain.com/prod-api/some-endpoint，这个 location 配置就会被触发。
• 在这里，Nginx 会根据配置将匹配 /prod-api 的请求代理到指定的服务器。

2. **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`部署一致

1. 关于购买云服务器，可选择：阿里云、腾讯云等。
2. 关于操作系统，看个人习惯，Ubuntu、CentOs、RedHat、都不错。
3. linux 远程操作软件：FinallShell（更方便）或者用Xshell、Xftp结合使用
4. 具体配置如下：

• 给服务器安装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 {}}
}