腾讯云服务器部署前后分离项目之前端部署

下面我将详细讲解“腾讯云服务器部署前后分离项目之前端部署”的完整攻略，具体步骤如下：

准备工作

1. 在腾讯云上购买一台云服务器，并开启相关服务。
2. 安装Node.js和Git工具。

前端代码打包

1. 安装前端依赖：
   bash
npm install
2. 执行前端代码打包命令：
   bash
npm run build

执行完命令后，将会在项目根目录下生成一个dist文件夹，里面包含了打包后的前端静态资源。

将前端代码上传至云服务器

1. 使用ssh工具登录云服务器：
   bash
ssh root@<云服务器公网ip>
2. 创建用于存放静态资源的文件夹：
   bash
mkdir /usr/share/nginx/html/<项目名>
   注意：<项目名>应该替换为你的项目名称。
3. 将静态资源上传至服务器，可以使用rsync命令：
   bash
rsync -avz --progress dist/ root@<云服务器公网ip>:/usr/share/nginx/html/<项目名>
   执行完成后，dist文件夹中的静态资源就已经被上传至云服务器了。

配置Nginx服务器

1. 安装Nginx：
   bash
yum install nginx
2. 修改Nginx配置文件，找到server块，然后修改root指令为存放静态资源的目录：
   ```bash
   server {
   listen 80;
   server_name localhost;
   root /usr/share/nginx/html/<项目名>;

   location / {
       index  index.html index.htm;
   }
   

   }
   注意：<项目名>应该替换为你的项目名称。
3. 重启Nginx服务：bash
   systemctl restart nginx
   ```

示例

假设我的项目名为“my-project”，并且前端代码已经被打包至dist文件夹中。

1. 登录云服务器：
   bash
ssh root@39.106.55.38
2. 创建用于存放静态资源的文件夹：
   bash
mkdir /usr/share/nginx/html/my-project
3. 将前端代码上传至云服务器：
   bash
rsync -avz --progress dist/ root@39.106.55.38:/usr/share/nginx/html/my-project
4. 安装Nginx：
   bash
yum install nginx
5. 修改Nginx配置文件，找到server块，然后修改root指令为存放静态资源的目录：
   ```bash
   server {
   listen 80;
   server_name localhost;
   root /usr/share/nginx/html/my-project;

   location / {
       index  index.html index.htm;
   }
   

   }
   6. 重启Nginx服务：bash
   systemctl restart nginx
   ```

这样，前端部署就完成了。你可以通过云服务器公网ip来访问你刚刚部署的前端页面。