vue2+koa2+mongodb项目上线

以你之姓@ 2021-09-07 06:22 544阅读 0赞

参考：[https://blog.csdn.net/qq\_40323256/article/details/103558128][https_blog.csdn.net_qq_40323256_article_details_103558128]

阿里云中开放端口：[https://ecs.console.aliyun.com/?spm=5176.12901015.0.i12901015.4ee8525ccKksCS\#/securityGroupDetail/region/cn-shenzhen/groupId/sg-wz9j6c7vo33ia5nkx3mb/detail/intranetIngress][https_ecs.console.aliyun.com_spm_5176.12901015.0.i12901015.4ee8525ccKksCS_securityGroupDetail_region_cn-shenzhen_groupId_sg-wz9j6c7vo33ia5nkx3mb_detail_intranetIngress]

客户端端口、服务端端口

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

还有数据库端口：

![20210408143605964.png][]

vue中的vue.config.js：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

module.exports = {
        lintOnSave: false, //取消eslint
        devServer: {
            proxy: {
                '/api': {
                    target: 'http://localhost:3000',//设置开发环境服务域名和端口号 别忘了加http
                    changeOrigin: true, //這裡true表示实现跨域
                    pathRewrite: {
                        '^/api': ''//使用时，如：axios.get('/api/login')
                    }
                }
            }
        }
    }

以上这段代码中的target不用改，可以直接用3000

没什么问题后就可以使用npm run build打包，将会在根目录生成dist文件夹，一会将dist文件夹上传到服务器即可。

后端koa中app.js:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][]

//自动判断开发环境和生成环境，并展示对应的端口
    if (process.env.NODE_ENV === "production") {
      process.env.PORT = 8000
      console.log("当前环境：production")
      console.log(`服务端地址：http://120.76.197.111:${process.env.PORT}`)
    } else {
      process.env.PORT = 3000
      console.log("当前环境：development")
      console.log(`服务端地址：http://localhost:${process.env.PORT}`)
    
    }
    console.log("process.env.NODE_ENV:", process.env.NODE_ENV)

跨域处理：

安装koa2-cors。

app.js中引入：

const cors = require('koa2-cors');
    app.use(cors())

打开xshell。在/opt目录中新建项目文件夹，比如rsoutdoor文件夹，存放dist文件和服务端文件

dist文件夹直接从本地拖上去即可。server文件夹自己新建一个。然后进入server文件夹，将本地除了nodemodule文件夹以外的所有文件上传上来。然后使用命令 cd /opt/rsoutdoor/server 进入server文件夹，执行命令：cnpm i 下载依赖。

配置nginx.conf:

使用命令:cd /etc/nginx  进入nginx文件夹，执行命令：vim nginx.conf，编辑nginx.conf。输入i ，按住键盘上下键移动光标，复制上面的配置文件，并加以修改：

nginx.conf中一定要注意以下红框中的内容，尤其是/api代理！！！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3][]

nginx.conf中的内容使用**:wq**修改保存后，记得再使用**nginx -s reload** 重启nginx配置。注意：不要直接在nginx.conf右键用记事本编辑！用记事本编辑会报错！推荐将nginx.conf复制到本地电脑，并用nodepad++编辑，然后设置编码为 utf-8，编辑完后替换远程的nginx.conf即可。之所以用记事本编辑会报错，是因为记事本保存时会设置编码为utf-8-Bom

直接上传dist文件，不用重载nginx

修改了server文件，需要重载服务：pm2 ls 查看id号，再pm2 reload id号。查看控制台日志：pm2 log id号

可以直接右键编辑app.js以记事本打开，保存后，也可以先不关闭记事本。

pm2启动server文件夹中的项目，命名为“XXX”。

**一定要使用export NODE\_ENV=production设置服务端的环境为production！！！！！！设置后才能根据判断当前环境是开发环境还是生产环境**

**如果是koa服务器，那么一定要用下面这种方式启动，尤其是后边的./bin/www**

//koa作为服务端 mongodb数据库
    export NODE_ENV=production&&pm2 start ./bin/www --name="XXX"

如果是express服务器，则用：

export NODE_ENV=production&&pm2 start app.js --name "XXX"

查看所有端口：

netstat -ntlp

线上是可以直接修改server里面的内容的，直接右键用记事本打开，编辑后保存，不需要使用pm2重载项目。

> **注意：重载pm2项目命令：pm2 reload id号，如下：**
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4][]

**5、连接有密码的mongodb时，千万不要用模板字符串或者变量的方式！！！！**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 5][]

//db.js
    let mongoose = require('mongoose')
    mongoose.set('useCreateIndex', true)
    mongoose.set('useNewUrlParser', true)
    mongoose.set('useUnifiedTopology', true)
    
    
    
    if (process.env.NODE_ENV === "production") {
        //线上环境
        mongoose.connect("mongodb://admin:123456@localhost:27017/yimiao?authSource=admin")//有密码的连接方式。线上
    } else {
        //开发环境
        mongoose.connect("mongodb://localhost:27017/yimiao")//注意：mongodb://后面是两个斜杠！
    }
    
    
    mongoose.connection.on('open', err => {
        if (err) {
            console.log(err)
            return
        }
        console.log("数据库连接成功！")
    })
    module.exports = mongoose;

> **注意：**
> 
> // mongoose.connect(\`mongodb://admin:123456@/$\{DB\_URL\}/$\{DB\_NAME\}\`, \{ authSource: 'admin' \})//请求将会失败。**千万不要用这种模板字符串！！！！！**  
> // mongoose.connect("mongodb://admin:123456@" + DB\_URL + "/" + test\_alioss + "?authSource=admin")//请求将会失败。**也不要用这种变量的方式！！！！！**  
> mongoose.connect("mongodb://admin:123456@localhost:27017/test\_alioss?authSource=admin")//这种方式可以请求成功。有密码的连接方式。线上

记得把线上的数据库也更新了

**6、一定要注意：虽然koa2中很少使用routes/index.js，并且把它删了后，在开发环境中也不会报错，但是它会在线上环境报错！！！！！！！！！！所以，千万千万不要把routes/index.js给删了**

[https_blog.csdn.net_qq_40323256_article_details_103558128]: https://blog.csdn.net/qq_40323256/article/details/103558128
[https_ecs.console.aliyun.com_spm_5176.12901015.0.i12901015.4ee8525ccKksCS_securityGroupDetail_region_cn-shenzhen_groupId_sg-wz9j6c7vo33ia5nkx3mb_detail_intranetIngress]: https://ecs.console.aliyun.com/?spm=5176.12901015.0.i12901015.4ee8525ccKksCS#/securityGroupDetail/region/cn-shenzhen/groupId/sg-wz9j6c7vo33ia5nkx3mb/detail/intranetIngress
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/e760df3467b141bcb2dac20b826e7e9b.png
[20210408143605964.png]: /images/20210725/80ac3b9257954780a4c7f3d43046804f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/16899fb2475847b8911685a00db447fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: /images/20210725/b7926f05858f4d32ab6056936d622cb8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3]: /images/20210725/63cc7e9f65b943a680a5a1acacfa8d12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4]: /images/20210725/866999ab969e4b9ab33ffb6d8501d2b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 5]: /images/20210725/43c16ffb808e4483b7d14e9fa4fba156.png