• 项目发布线上部署(阿里云)


    这是我写好的项目(后台管理:admin,前台展示:web,服务端:server)

    在这里插入图片描述

    一、生产环境编译

    • 1.修改axios的baseURL
    const http = axios.create({
        // baseURL: "http://localhost:3000/admin/api"
        baseURL: process.env.VUE_APP_API_URL || '/admin/api',
    });
    • 2.在admin的根目录添加环境变量文件 .env.development,添加 VUE_APP_API_URL = http://localhost:3000/admin/api

    在这里插入图片描述

    • 3.在server的main.js,中添加app.use('/admin', express.static(__dirname + '/admin')) //静态文件
    • 4 .在admin中,创建vue.config.js配置文件,进行配置

    在这里插入图片描述

    module.exports = {
      outputDir: __dirname + "/../server/admin/", //将文件输出到server/admin
      publicPath: process.env.NODE_ENV === "production" ? "/admin/" : "/" //当生产环境,就会使用/admin的publicPath
    }
    • 5.admin中npm run build,就会在server中生成之前配置的admin文件夹
      在这里插入图片描述
    • 6.成功访问
      在这里插入图片描述
      1. 在web文件夹下执行上面相同的步骤。就会在server文件夹,生成build的web文件夹。
        注意:vue.config.js,配置不同,我们访问的根路径就是前台,所以不用加web
      2. 在这里插入图片描述
      3. 在这里插入图片描述在这里插入图片描述在这里插入图片描述

    二、 购买域名和服务器

    • 1.购买域名在这里插入图片描述
    • 2.购买服务器(境内要备案,境外可以不用备案),选择镜像Ubuntu18
      在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

    三、 域名解析

    • 记录值为服务器的公网IP在这里插入图片描述
    • 在git bash here中执行ssh root@test.topfullstack.com在这里插入图片描述

    四、. Nginx 安装和配置

          更新apt版本库里的软件版本,然后安装nginx

    • apt update 
    • apt install nginx -y
      在这里插入图片描述
    • 如果没有显示,去阿里云安全组,开启80端口
      在这里插入图片描述

    5. MongoDB数据库的安装和配置

    • apt install mongodb-server -y

    6. git 安装、配置ssh-key

    • apt install -y git
    • ssh-keygen
    • cat /root/.ssh/id_rsa.pub,获取到的ssh-key,要保存下来在这里插入图片描述

    7. Node.js 安装、配置淘宝镜像

    • apt install -y nodejs
    • apt install -y npm
    • npm config set registry https://registry.npm.taobao.org
    • npm i -g nrm
    • npm i -g n
    • n use latest
    • 退出重新连接exitssh root@test.topfullstack.com

    8. 拉取代码,安装pm2并启动项目

    • 向github或者gitee提交代码
    • 把ssh-keygen,添加到仓库的公钥,拉取克隆代码在这里插入图片描述
    • 创建一个文件夹,进入文件夹在这里插入图片描述
    • clone代码在这里插入图片描述
    • 进入moba文件夹的server文件夹,运行npm i在这里插入图片描述
    • npm i -g pm2
    • pm2 start index.js在这里插入图片描述

    9. 配置 Nginx 的反向代理

    • 在vscode中找到 remote-ssh插件在这里插入图片描述
    • 点击设置配置文件,点击小窗口进入在这里插入图片描述在这里插入图片描述
    • 输入密码,连接在这里插入图片描述
    • 进入==/etc/nginx/==在这里插入图片描述
    • 去nginx配置网站,https://www.digitalocean.com/community/tools/nginx
    • 选择nodejs,进入server,填入自己域名,https不启用,最后下载。在这里插入图片描述在这里插入图片描述在这里插入图片描述
    • 把nginxconfig.io文件夹复制过去,把available里面的文件复制过去,把enabled里面的文件复制过去在这里插入图片描述
    • 重载nginx的配置文件,service nginx reload 在这里插入图片描述
    • 重启服务器pm2 start server/index.js在这里插入图片描述
    • 成功显示出来在这里插入图片描述

    10. 迁移本地数据到服务器 (mongodump)

      • 导出数据库,mongodump -d node-vue-moba在这里插入图片描述在这里插入图片描述
      • 进入服务器/root/,将dump文件夹复制过去在这里插入图片描述在这里插入图片描述
      • mongorestore,恢复数据库 在这里插入图片描述
      • 重启服务器在这里插入图片描述
      • 后台就有数据了在这里插入图片描述
      • 后台的图片链接还是localhost:3000,需要修改上传图片的接口在这里插入图片描述
      • 先上传git,再服务器上去拉取在这里插入图片描述在这里插入图片描述
      • 重启服务器,pm2 reload index
      • 通过ssh登录数据库,修改图片链接在这里插入图片描述在这里插入图片描述
  • 相关阅读:
    43. VUE 脚手架 2 版本 新建项目过程
    42 VUE 脚手架 安装 和 基本使用(创建项目)【命令】
    JDBC 原始缺点分析 和 解决
    39-8 WEBPACK —— 搭建本地服务器
    39-7 WEBPACK — js压缩的Plugin
    14. SpringBoot 更换指定的 日志框架
    39-6 打包html的plugin
    39-5 插件 — 添加版权的Plugin
    【HDU 1027】Ignatius and the Princess II
    【洛谷 1896】互不侵犯_new
  • 原文地址:https://www.cnblogs.com/sangejava/p/14180005.html
Copyright © 2020-2023  润新知