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

本文详细介绍了从生产环境编译到域名服务器配置,再到项目部署、nginx反向代理及数据迁移的全栈项目部署全过程。涵盖了环境变量设置、静态文件生成、服务器选择与配置、数据库迁移、图片地址修改等关键步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值