关键词

如何优雅的在一台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项目的运行效果。

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

本文链接:http://task.lmcjl.com/news/14375.html

展开阅读全文