超基础的一次上线所做流程和遇到的问题分享

YanxttWeb
129 阅读3分钟

项目上线

在学习了前端这么久之后，终于完成了一个自己的网站项目并成功上线，在过程中还是遇到了一些问题，所以来掘金总结并分享一下。

1、修改项目api

在根路径下建立.env.development文件

// 添加基本接口路径
REACT_APP_API_URL=http://localhost:3000/v1
// 添加文件上传路径
REACT_APP_UPLOAD_URL=http://localhost:3000/v1/upload

修改创建axios实例时设置的baseURL

const http = axios.create({
	baseURL: process.env.REACT_APP_API_URL || '/v1'
})

这样我们在开发环境启动项目的时候就会设置成配置文件中的路径，而当我们部署的时候，就会根据当前网站地址来拼接上绝对路径/v1

在REACT项目中，如果后端没有做页面相应的返回，那么需要使用HashRouter，而不是BrowserRouter

2、修改打包后引入文件的公共路径

Vue项目 —— admin项目为例

创建vue.config.js文件

module.exports = {
	publicPath: process.env.NODE_ENV === 'production' ? '/admin/' : '/'	
}

React项目 —— admin项目为例

在package.json文件中添加一项

"homePage": '/admin/'

3、执行打包命令

npm run build

4、移动已打包文件

将打包出来的build文件夹，复制到server项目中的根路径下，并改名为web，然后去index.js中开启静态文件代理

app.use('/', express.static(__dirname + '/web'))

5、购买域名和服务器

  1. 打开并注册阿里云账号
  2. 进行域名注册
  3. 购买完成之后进行域名备案
  4. 购买服务器
  5. 复制服务器的公网ip去自己的域名列表进行域名解析
  6. 安装nginx

    通过ssh链接到服务器，升级包管理器，然后查看有没有可用的nginx

    ssh root@{{ip}}
apt update
apt show nginx
apt install nginx -y
  7. 安装mongodb
    apt show mongodb
apt show mongodb-server
apt install mongodb-server -y

    执行mongo，查看所有数据库

    mongo
show dbs
exit
  8. 安装git，生成ssh-key
    apt install git -y

    ssh-keygen
cat /root/.ssh/id_rsa.pub

    复制生成的ssh-key，到gitee里添加到项目部署公钥中

  9. 安装nodejs
    apt install nodejs -y
apt install npm -y

    配置淘宝镜像

    npm config set registry https://registry.npmmirror.com/

    安装快速切换镜像地址的工具

    npm i -g nrm
nrm use npm
nrm use taobao

    安装升级nodejs的工具

    npm i -g n
n stable
n latest
node -v
  10. 拉取代码，安装pm2

    在服务器根路径创建文件夹data

    mkdir /data
cd /data
git clone git@gitee.com:{{码云用户名}}/{{码云项目名}}.git
// 安装依赖
cd server
yarn / npm install

    安装pm2

    npm i -g pm2

    启动项目

    pm2 start index.js
pm2 list
pm2 logs index
  11. 配置nginx反向代理

    在vscode中安装Remote - SSH插件

    设置Host，HostName，User

    链接之后打开/etc/nginx文件夹

    去nginxconfig.io生成配置文件，下载zip，将文件复制到服务器中对应的文件夹中

  12. 迁移本地数据到服务器
    mongodump -d {{数据库名称}}

    复制dump文件夹到服务器上

    mongorestore
  13. 将server项目中的上传文件的接口返回url拼接改成当前网站地址
    const multer = require('multer')
const upload = multer({ dest: __dirname + '/../../file'})
app.post('/web/api/upload', authMiddleware(), upload.single('file'), async (req, res) => {
    const file = req.file;
    // file.url = `http://localhost:3000/file/${file.filename}`
    file.url = `http://candyfun.cn/file/${file.filename}`
    res.send(file)
})
  14. 拉去代码，重启pm2
    pm2 reload index
  15. 下载使用Robo 3T修改之前的本地数据
avatar
文章
阅读
粉丝