如何优雅的在一台vps（云主机）上面部署vue+mongodb+express项目

下面我将为你详细讲解如何优雅地在一台vps上面部署vue+mongodb+express项目的完整攻略。

确认vps环境

首先，需要确认你购买的vps已经安装好了Node.js和MongoDB。如果没有安装，需要先安装它们。具体安装方式可参考 Node.js 和 MongoDB 的官方文档。

部署Vue项目

1. 在vps上创建一个专门存放代码的文件夹，例如/home/username/myapp。

```
# 创建文件夹
mkdir /home/username/myapp

# 进入文件夹
cd /home/username/myapp
```

1. 将你的 Vue 项目拷贝到该文件夹内。

# scp 命令可以直接把项目拷贝到 vps。
scp -r /path/to/project username@servername:/home/username/myapp

1. 安装依赖。

```
# 进入项目文件夹
cd /home/username/myapp/your-vue-project

# 安装依赖
npm install
```

1. 配置Vue项目的生产环境。

# 打包
npm run build

1. 完成打包后，生成的dist文件夹内的所有文件都是需要部署的。把这些文件拷贝到web服务器上，然后在nginx等web服务器中，配置静态文件的服务路径即可。

部署Express项目

1. 在vps上创建一个专门存放Express项目的文件夹，例如 /home/username/myapp/express。

```
# 创建文件夹
mkdir /home/username/myapp/express

# 进入文件夹
cd /home/username/myapp/express
```

1. 将你的Express项目拷贝到该文件夹内。

# scp 命令可以直接把项目拷贝到 vps。
scp -r /path/to/project username@servername:/home/username/myapp/express

1. 安装依赖。

```
# 进入项目文件夹
cd /home/username/myapp/express/your-express-project

# 安装依赖
npm install
```

1. 修改 Express 项目的配置文件。

Express 项目配置文件的样本通常都会提供，位于项目目录中。找到并编辑文件 config.js 或 config.json。文件中包含数据库连接参数、监听端口、SESSION配置等项。修改这些参数以满足你的需要。

1. 启动项目。

```
# 进入项目文件夹
cd /home/username/myapp/express/your-express-project

# 启动项目
npm start
```

部署MongoDB

1. 配置数据库。

MongoDB 配置文件的样本文件位于 /etc/mongod.conf。使用编辑器打开该文件，修改 bindIp 为0.0.0.0。

1. 启动 MongoDB。

# 启动 MongoDB
service mongod start

1. 外部连接 MongoDB。

在应用测试期间，可以通过本地机器上的 MongoDB 客户端链接到云主机上的数据库，该客户端是通过以下命令安装的。

# 安装 MongoDB 客户端
sudo apt-get install mongodb-clients

然后，用以下命令连接到 MongoDB 数据库。

mongo --host YOUR_SERVER_IP_ADDRESS --port YOUR_MONGODB_PORT

以上就是在vps上面部署vue+mongodb+express项目的完整攻略，希望对你有所帮助。下面演示两个示例说明。

示例1

假设你的vps的IP地址为203.100.100.100，你的Vue项目在本地的文件夹 my-vue-project 内，你的Express项目在本地的文件夹 my-express-project 内。你可以按照如下步骤部署项目：

1. 将my-vue-project拷贝到vps上。

scp -r /path/to/my-vue-project username@203.100.100.100:/home/username/myapp

1. 进入vps，安装依赖，打包项目。

cd /home/username/myapp/my-vue-project
npm install
npm run build

1. 将Express项目拷贝到vps上。

scp -r /path/to/my-express-project username@203.100.100.100:/home/username/myapp

1. 进入vps，安装依赖，编辑配置文件，启动项目。

cd /home/username/myapp/my-express-project
npm install
nano config.js
npm start

示例2

假设你已经将Vue项目和Express项目打包好，Vue项目的静态文件在 dist 文件夹中，Express项目在 server 文件夹中，你可以按照如下步骤部署项目：

1. 将my-vue-project拷贝到vps上。

scp -r /path/to/my-vue-project username@203.100.100.100:/home/username/myapp

1. 将my-express-project拷贝到vps上。

scp -r /path/to/my-express-project username@203.100.100.100:/home/username/myapp

1. 在vps上，创建一个新的Nginx站点，指向Vue项目的 dist 文件夹，将Express项目绑定到端口3000。在Nginx配置文件中增加以下内容：

```
server {
listen 80;
server_name example.com; # 填入你的域名或IP地址
root /home/username/myapp/my-vue-project/dist; # 设置站点根目录
index index.html;

    location /api {
        proxy_pass http://localhost:3000; # 将请求转发到Express的端口3000
    }
}

```

1. 通过浏览器访问站点 address.com，即可看到Vue项目的运行效果。

以上就是两个示例说明，你可以根据自己的情况进行调整。希望对你有所帮助。