vue3.0+node+mongodb完成项目部署到heroku

前言

本人只是一个前端，一直想独自完成一个项目的前端、后台，现在终于实现了，虽然只是刚入门。
我写这篇博客是因为百度上搜到的部署到heroku的教程实在是太少了，而且都讲一半不讲一半，靠自己摸索着终于是完成了，分享给大家。

工具

1. vue-cli
2. node
3. mongodb Atlas（数据库，可以免费申请一个空间）
4. heroku（挺好的，就是有个缺点：需要翻墙才能注册）
5. git

github地址（有帮助请Star一个，谢谢~）

https://github.com/lbm526/vue-node-app

成功后的项目连接

https://frozen-wildwood-96313.herokuapp.com

以下代码分布图

关于vue的东西就不介绍了，主要是标出重要的东西，对vue全家桶不了解可以去搜索相关教程学习。

代码&部署

1. 修改package.json(很重要)

• 在你根目录下的package.json的“scripts”里面增加如下代码

"postinstall": "npm run build",
"start": "node server.js",

• 将生产环境必须的模块放到dependencies里面，像vue这些就不需要的，因为打包后是普通的html+css+js，需要的例如：“body-parser”、"express"等，以下是我项目必须的：

"dependencies": {
    "axios": "^0.18.0",
    "bcrypt": "^3.0.6",
    "body-parser": "^1.19.0",
    "bootstrap": "^4.3.1",
    "core-js": "^2.6.5",
    "express": "^4.17.1",
    "express-session": "^1.16.1",
    "jquery": "^3.4.1",
    "method-override": "^3.0.0",
    "mongoose": "^5.5.6",
    "node-uuid": "^1.4.8",
    "popper.js": "^1.15.0",
  }

注：这步很重要，我部署后，老是不成功就是这步，缺模块

2. 为了提交 dist 目录，需要删除根目录下 .gitignore 文件中忽略的 /dist/：

.DS_Store
node_modules
# 注释 /dist/ 或者删除这一行

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

解释下.gitignore文件的用处：打包时，项目所忽略的文件

3. 先切换到项目根目录，生成生产环境可用的代码，代码会生成在 dist 目录，我们只需上线该目录：

npm run build

4. 为减少干扰，在其他地方创建个目录，把dist文件copy进去，把项目跟路径下的package,json、serve文件、server.js也copy过来，文件目录如下：
   

5. 建立启动服务文件（非常重要）
   Procfile文件，你没看错就是这个名字，没有扩展名，开头必须是大写P ，千万别写错,这是在heroku用来启动服务的；然后文件里面写启动代码：

web: node server.js

：符号右边有空格，如果没有当你部署好之后发请求会503出错，因为服务没启动，这点非常重要

6. 配置vue.config.js的服务代理，最好不要写localhost，写127.0.0.1

const webpack = require("webpack");

const port = process.env.PORT || 3000;

module.exports = {
//configureWebpack 是Vue CLI3.0 中用于配置 webpack 插件参数的地方，你在这里设置，会新建或者覆盖 webpack 默认配置。
//webpack ProvidePlugin 的含义是创建一个全局的变量，使这个变量在 webpack 各个模块内都可以使用。这里的配置含义是创建 '$'、'jQuery'、'window.jQuery' 三个变量指向 jquery 依赖，创建 'Popper' 变量指向 popper.js 依赖。
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                Popper: ['popper.js', 'default']
            })
        ]
    },
    devServer: {
        historyApiFallback: true,
        // open: true,
        //让前后端http请求都转到node的3000端口，而不是前端的8080端口
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:'+port+'/',//后端接口地址
                changeOrigin: true,//是否允许跨越
                ws:false,
                pathRewrite: {
                    '^/api': '/api',//重写,
                }
            }
        }
    },
    // devtool: "source-map", //报错精确文件位置
}

7. 部署数据库
   上面代码部分介绍得差不多了，接下来讲讲部署吧，数据库我使用的是mongodb Atlas，先去官网https://docs.atlas.mongodb.com/注册账号，有免费的额定空间，注册了之后进行一下操作：
   注册成功后新建一个数据库，点击Build a new cluster，后进入：
   
   下一步后需要你填写一些信息（选的话，选不用钱就行），其中会让你填写用户名和密码，必须要记得密码，很重要

8. 创建白名单，这个ip地址挺重要的，添加时会自动获取你的ip，嫌麻烦你可以直接设置0.0.0.0就可以，我设置了三个
   

9. 将数据库字段码复制到您的代码里面
   进入您的数据库里，点击connect：
   
   将上面代码copy下来，进入你的代码，我的github是serve/model.js（连接数据库部分）：

// 如果是生产环境连接数据的地址就是你在mongodb Atlas的字符码
if(process.env.NODE_ENV == "production"){
    mongoose.connect('mongodb+srv://lbm_vue:<password>@cluster0-eipdm.mongodb.net/test');
}else{
    mongoose.connect('mongodb://localhost/helloWorld');
}

用户名会自动获取，我的是lbm_vue，把<password>部分替换成第7步你要记住的密码
这样数据库部署就完成了

10. 部署heroku（最后一步了，开不开心？快不快乐？）
    先去heroku注册一个账号，其中要填的邮箱是要谷歌邮箱，您可以去gmail官网注册一个，邮箱有时候因为网络问题会报手机····问题（忘了）
    第二步：命令行安装heroku

npm install --global heroku

检查版本

heroku --version

第三部登陆heroku，输入后回车会提示按任意键进行或者按p退出，按回车就好

heroku login

你会看到它会打开一个页面，你点login in成功后就可以关闭网页了，命令行会出现：
你的一些信息，邮箱什么的，证明登陆成功了，按ctrl+c退出

第四步：创建一个app：

heroku create

第五步进入heroku一下页面，会有部署指令：

第六步：回到我们的项目：

输入回到上一层

cd ..

第七步：使用git命令把代码上传到heroku（上面第五步的页面就有，可以不看下面的教程了），也可以使用github（不介绍，自己找教程去吧）

git init

添加代码(.是所有文件，你可以输入文件名)：

git add .

连接heroku的app:

heroku git:remote -a （app地址）

git commit -am "make it better"

git push heroku master

最后就可以打开你的项目了(也可以在heroku页面打开它)：

heroku open

---

以上教程就是把vue+node+mongdb部署到heroku了，你可以把连接分享到小伙伴去看你的网站了，很nice吧？
这是我的github项目地址https://github.com/lbm526/vue-node-app，可以用我的代码进行操作，能帮到你或者喜欢的请Star一下，谢谢~
如果你按照上面操作没有实现到，或者有更好的部署（不是heroku）的请评论互相讨论，谢谢观看