1 生产环境编译
- baseURL替换baseURL:process.env.VUE_APP_API_URL || ‘/admin/api’ 改成没有localhost的地址
同时添加环境变量文件用于生产模式 VUE_APP_API_URL=http://localhost:3001/admin/api
-
在admin中 加入vue.config.js,内容
module.exports={ outputDir:__dirname + '/../server/admin', //控制dist文件夹生成到/server/admin publicPath:process.env.NODE_ENV==='production' ? '/admin' :'/' }
-
cd admin > npm run bulid进行编译,生成了dist文件夹
web同理
ps:发布的时候只需要server这个文件夹就好了,因为web和admin都生成了静态文件放在server文件夹中了
2 域名&服务器配置
-
购买域名,域名备案
-
购买服务器,这里我用了阿里云学生免费云服务器ESC
-
域名解析
-
nginx 安装和配置
apt update apt show nginx apt install nginx -y
ps:注意服务器要配置好HTTP80端口
-
mongodb安装和配置
apt show mongodb apt show mongodb-server apt install -y mongodb-server mongo 查看一下mongodb客户端 show dbs 查看一下数据库
-
git安装 ,方便同步代码
apt install -y git ssh-keygen //配置ssh key cat /root/.ssh/id_rsa.pub(公钥地址) 查看服务器公钥 ps:查看本机sshkey:cat ~/.ssh/id_rsa.pub ,没有的话先ssh-keygen一下
-
各种安装
apt install -y nodejs //安装node.js apt install -y npm //安装npm npm config set registry https://registry.npm.taobao.org //配置淘宝镜像 npm i -g nrm //安装nrm,快速切换镜像的代码 npm i -g n 升级node n latest 使用最新版,重新登陆一下就看到node版本更新到最新版
3 项目部署,启动项目
- 项目已经放到Github上了,我们在服务器上部署这个项目
- 记得仓库配置好SSH keys & Deploy keys
SSH keys --本机的SSH keys
Deploy keys --服务器的SSH keys
-
clone一下这个项目,放到服务器的/var/www/html/data文件夹下(data需要新建)
git@github.com:Zhouqiaoqiao1026/fullstack-food-corner.git
cd /var/www
/var/www# ls
mkdir /data
cd /data
git clone git@github.com:Zhouqiaoqiao1026/fullstack-food-corner.git //拉取代码
- 安装pm2并启动
npm i -g pm2
pm2 start index.js
ps:curl http://localhost:3001请求地址,查看一下
4 nginx 反向代理
-
安装remote插件,在vscode中打开我们的服务器,进入etc/nginx 文件夹
-
去网站https://www.digitalocean.com/community/tools/nginx# 中获取我们的配置文件 ,下载
-
拷贝nginxconfig.io整个文件夹/sites-enabled/sites-available拷贝到服务器etc/nginx 文件夹中
-
重新加载
root@iZwz95s090y2d9dn2akwauZ:/etc/nginx# service nginx reload
5 迁移本地数据到服务器
-
进入项目本地文件夹终端
mongodump -d fullstack-food-corner(本地数据库名称) 在根目录生成了一个dump文件夹
-
进入我们的服务器,进入/root/文件夹 把dump文件夹粘贴到该目录下
-
终端执行 mongorestore
-
图片地址修改
将localhost:3001修改 为自己的域名
-
修改后重新拉取代码
项目文件夹git bash:
git status 查看修改的文件 git commit -am "fix upload url" git push
服务器:
root@iZwz95s090y2d9dn2akwauZ:/data/fullstack-food-corner# git pull
-
重启
pm2 reload index
-
为了能访问图片,修改图片地址
打开robo3T 将localhost:3001 改成我们的域名
批量修改:
db.getCollection('categories').find({}).map(doc=>{
doc.icon=doc.icon ? doc.icon.replace('localhost:3001','test.bol4.top') :null
db.categories.save(doc)
return doc
})