项目部署--让我们开发的网站能够通过域名被大家访问

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
  })