部署vue项目到云服务器上详细流程

以下是Vue项目部署到腾讯云服务器(Ubuntu)的详细步骤,包括所需命令代码:

步骤1:连接腾讯云服务器

打开终端(Terminal)或者使用PuTTY等工具连接到远程服务器。

```
ssh root@<腾讯云服务器IP地址>
```

步骤2:安装Nginx

更新apt-get源并安装nginx

(需要在系统上拥有提升的权限 (root):"sudo su")

```
apt-get update
apt-get install nginx
```

步骤3:配置Nginx

修改 /etc inx/sites-enabled/default 文件

```
nano /etc inx/sites-enabled/default
```

在server段内添加以下内容:

```
location / {
    root <项目构建输出目录/dist/>;
    index app.html;
    try_files $uri $uri/ /app.html;
}
```

完成后保存文件并重新加载 Nginx 配置:

```
service nginx reload
```


步骤4:将本地dist目录上传至服务器

zip -r dist.zip dist/
scp dist.zip user@servername:/home/user

步骤5:解压缩dist.zip文件

unzip dist.zip

步骤6:安装Node.js 和 npm

如果您的环境中已经安装了Node.js 和npm,则可以跳过此步骤。

```
sudo apt-get update
sudo apt-get install nodejs npm
```

步骤7:安装http-server

```
sudo npm install http-server -g
```

步骤8:启动10.0.0.1 微型服务器程序

```
cd dist
http-server -a 0.0.0.0 -p 
```

步骤9:完成

在浏览器中输入服务器IP地址和端口号即可查看Vue项目。

使用pm2来运行http-server,这样可以方便地管理进程(让项目一直运行)。具体代码如下:

   ```
sudo npm install pm2 -g

cd dist

pm2 start http-server --name "vue-app" -- -p

pm2 save
```

停止使用 PM2 启动的应用程序,可以运行以下命令:

```
pm2 stop vue-app
```

停止后重启项目:(常用于更新项目)

```

pm2 delete vue-app && pm2 start http-server --name "vue-app" -- -p

或者 pm2 restart vue-app

```

如果要删除应用程序,可以使用以下命令:   

```

pm2 delete vue-app 

```

注:        

如果通过 `sudo apt-get install nodejs npm` 下载的 node.js 版本太低,您可以尝试以下步骤升级到最新版本:

1. 确保系统中已经安装了 `curl` 工具:
   
   ```
   sudo apt-get update
   sudo apt-get install curl
   ```

2. 使用 `curl` 命令下载 Node.js 安装包:

   ```
   curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
   ```

   这里使用了 14.x 版本,您也可以根据自己的需要替换为其他版本号。

3. 执行以下命令来安装 Node.js 和 npm:

   ```
   sudo apt-get update
   sudo apt-get install -y nodejs
   ```

4. 检查版本是否已经更新到最新:

   ```
   node -v
   ```

   如果输出的版本号是最新的,表示升级成功。

你可能感兴趣的:(服务器,vue.js,运维)