Vue项目部署的实现（阿里云+Nginx代理+PM2）

最近部署一个Vue项目到阿里云ECS上，因为项目涉及一些跨域请求，所以采用了Nginx代理请求本地的node服务（利用pm2做进程管理）。node服务借助axios设置headers的referer、host转发请求，解决跨域请求问题。 先交代下在阿里云ECS里安装的部署环境：phpstudy（php调试运行大礼包，里面包含nginx、mysql等，还能监控端口占用情况）、pm2（node服务进程管理工具）、node、git等等。 部署过程 拉去GitHub项目代码至root目录下（找到安装phpstudy的WWW目录），构建项目 修改nginx-conf的代理配置、root项配置（指 Vue项目部署到阿里云ECS涉及的关键步骤包括配置Nginx代理、使用PM2管理和启动Node服务以及确保正确处理跨域请求。以下是对这些知识点的详细说明： 1. **Nginx代理**： - Nginx是一个高性能的HTTP和反向代理服务器，常用于负载均衡和提供静态文件服务。在Vue项目部署中，Nginx用于代理前端Vue应用对后端API的请求，解决跨域问题。 - `upstream` 模块定义了一组服务器，这里的`my_project`就是一组包含本地127.0.0.1:9001的服务器集群。 - `server` 块配置监听80端口的服务器，并设置服务器名称`my_project`，这是对外暴露的域名或IP。 - `location /` 是匹配所有请求的规则，其中`proxy_pass http://my_project/;`将请求代理到上游服务器集群。 - `proxy_set_header` 用于设置HTTP头部信息，如`Host`和`X-Forwarded-For`，这有助于后端服务识别客户端信息和转发请求。 2. **PM2**： - PM2是一个Node.js应用的生产进程管理器，具备自动重启、负载均衡、日志管理和监视等功能。 - 在Vue项目中，PM2用于管理Node服务，例如这里可能有一个名为`prod.server.js`的服务文件，包含了处理API请求的逻辑。 - 使用`pm2 start prod.server.js`命令启动服务，`pm2 monit`可以监控应用状态。 3. **跨域请求处理**： - 跨域是浏览器的安全策略，防止JavaScript从一个源发送请求到另一个源。在本例中，Vue应用通过Nginx代理，请求转发到Node服务，Node服务再通过axios设置headers的`referer`和`host`，模拟原请求的头部信息，从而绕过跨域限制。 4. **项目构建**： - 在构建Vue项目前，需修改`config/index.js`中的配置，特别是`build`部分，比如更改端口`port: 9001`以避免与PHPStudy的默认端口冲突，并设置`assetsPublicPath`为空字符串`''`，以适应部署后的静态资源路径。 - 构建完成后，Vue应用的生产版本将位于`dist`目录下，Nginx的`root`配置应指向这个目录，确保能正确提供静态文件。 5. **环境准备**： - 在阿里云ECS上，安装了PHPStudy，它提供了一个包含Nginx、MySQL等的集成环境，还可以监控端口占用情况。 - 此外，还安装了PM2、Node.js和Git等必备工具，用于部署、运行和管理Vue项目。 6. **注意点**： - 确保Nginx配置中使用的端口没有被其他服务占用，如避免与PHPStudy的默认9000端口冲突。 - 使用`phpstudy`提供的工具检查端口占用，以便正确配置Nginx和Node服务的端口。 - 在使用PM2时，要确保服务文件（如`prod.server.js`）已经编写完毕并正确处理请求。 总结来说，Vue项目部署到阿里云ECS，涉及到前端构建、Nginx反向代理、PM2进程管理、跨域请求处理等多个环节，每个环节都需要细心配置和检查，以确保项目能正常运行并提供服务。