阿里云服务器项目部署(vue+egg+....)

Vue3+Egg前端段分离项目部署在阿里云服务器，只能说很全，超级全

这里网上给的不是这里少了一点就是那里少一了点，我真的被折磨了好几天，终于给我整出来了太难么

先购买阿里云服务器(新用户免费使用三个月，学生打折)

服务器配置

阿里云服务器安全组开放端口,点击配置规则

实例点进来，然后点击安全组


开放相应端口(这里根据自己的条件来开放，如果不懂可以直接选择全部开放)

好了之后还有开放自己项目用到的端口号，你如你前端要用5173，后端用的7001，你就开放5173和7001端口,根据自己的条件来，授权对象的话就选0.0.0.0，然后点击保存就好啦。(描述的话，可写可不写，但是我建议写，防止以后还有上线其他项目的话搞混了)

远程连接服务器


登录连接到服务器后先把这个页面放着，咱们就可以借助宝塔来配置我们的服务器，打开一个新的窗口进入宝塔官网，点击立即免费安转，滑到最底下，有以下的命令,我这边就给一个万能安装脚本的命令

万能安转脚本:if [ -f /usr/bin/curl ];then curl -sSO https://download.bt.cn/install/install_panel.sh;else wget -O install_panel.sh https://download.bt.cn/install/install_panel.sh;fi;bash install_panel.sh ed8484bec

复制粘贴到刚刚连上的服务器的界面，运行，运行中间一路yes就对了，完了之后是这个页面

复制第一个网址到浏览器打开，然后就会弹出一个登录页面，你再复制第二个框框里的username和password里的数登上去就可以了，

进去了之后，会弹出一个弹窗，选第一个
## 数据库配置

安装完了(这里是上面的5个安装完了之后哈)之后，先配置咱们得数据库

这里咱们配置的数据库尽量和项目用的一样，用户名不能用root你就换一个，后面改一下egg中config.default.js里面的关于数据库的配置，后面我会细说.



本地上传导入sql文件即可，导入之后记得要看一看数据是不是有，点击管理，去看看表和数据都在不在，这里我就不一一展示了

到这里，如果数据库没问题，咱们就进行下一步

egg项目配置

好了之后，你就要点进你的egg项目文件，在根目录创建一个server.js文件

const egg = require('egg');

const workers = Number(process.argv[2] || require('os').cpus().length);
egg.startCluster({
    workers,
    baseDir: __dirname,
});

把这个代码复制进去，保存

然后，找到config.default.js文件，双击一下

这里改好了之后，在想想哪里涉及到了域名的地方，都得改，比如头像上传啊等等，改完了之后咱们下载pm2

下好了之后，咱们用它


然后改这个后端的端口，你项目后端用的什么端口，你这就该成什么端口

然后先把他停止掉(切记先停掉)，

点击终端(就是左边侧边栏的终端)
第一次进应该会弹一个登录框，应该是登不进去的

参考文章:https://blog.csdn.net/zgyoumiao/article/details/124898052

登进去后:

cd ..    //这条命令退出当前文件

然后运行ls 查看当前文件有哪些文件夹

然后不断重复cd 进入到你的egg项目的根目录里面，到了egg项目的根目录后就可以

依次运行三条命令

npm install --production
npm i egg-scripts --save
npm start

最后一条命令出现egg started on http://127.0.0.1:7001就代表启动成功了。

然后后端就好了

有些情况应该是端口号被占用

这里提供两条命令：

lsof -i :8080   //查看8080被那个pid占用了
kill -9 1234     //1234假设是这个pid占用了，就运行这条命令清除占用

宝塔面板放行端口

前端配置

1.在打包之前做两件事

如果你用的是ts写的且ts关于类型推论的报错没改完的话，是打包不了的，你要改下面的代码

在你的package.json：中
"scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",  这一行要改一下，改成"build": "vite build",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },

然后就是，如果你的vue项目的路由系统用的是HTML5 模式也就是用 createWebHistory() 创建 HTML5 模式，你就要多配置一个东西，这边建议你改成hash模式去index.ts改成hash模式就可以了

然后记得改域名，改完后在打包


dist你建传过来后，解压就ok了

 location /api/ {
            proxy_pass  http://自己的服务器公网ip:7001/;  7001是我的egg项目用的端口号，你们根据自己的情况写
            proxy_set_header Host $host:$server_port;
        }

如果没有改路由的历史模式为hash的话，就要在这儿载加上一个配置

location / {
  try_files $uri $uri/ /index.html;
}

_header Host $host:$server_port;
}

如果没有改路由的历史模式为hash的话，就要在这儿载加上一个配置

```js
location / {
  try_files $uri $uri/ /index.html;
}

到这儿就结束了！然后你就可以通过服务器公网ip访问你的项目啦！！