前端部署实战（阿里云服务器+nginx）

本文链接：https://blog.csdn.net/qq_41167830/article/details/131550426

阿里云服务器部署前端项目

准备打包好的前端代码

使用npm run build 命令打包前端项目为dist包，我们的qiankun微前端项目包括一个主应用master和两个子应用sub-vue2、sub-vue3，需要分别打包这三个项目的代码。

获取一台阿里云服务器

阿里云服务器有免费试用的版本，学生认证最多可以使用三个月，非学生认证可以试用一个月。获得自己的服务器后，打开云服务器ECS控制台，在实例中找到自己服务器，点击远程连接，选择通过WorkBench远程连接

之后需要输入密码，出现以下画面说明远程连接成功

安装xshell和xftp

开始之间需要安装xshell用于连接服务器，安装xftp用于上传文件，安装完毕后打开xshell，新建一个会话，主机填服务器的公网地址，可在阿里云实例页面查看，填好后点击确定

之后需要输入用户名root和你的密码，出现以下画面说明连接成功

为服务器配置nginx

输入yum install ngnix安装ngnix

输入nginx启动nginx，输入netstat -anput | grep nginx查看nginx的端口占用情况，这里nginx占用了80端口

打开服务器公网地址，出现以下页面，说明nginx启动成功

部署项目到服务器上

在xshell中点击窗口–》传输新建文件，打开xftp

新建一个web文件存放准备好的项目打包文件

把本地打包好的dist文件夹拖拽到改目录下，即可将主机文件传送到服务器上

通过nginx -t命令找到nginx配置文件所在目录，找到该文件传输到自己电脑桌面上

修改该配置文件，将root 目录更改为刚刚上传的dist目录，修改完毕后再上传覆盖服务器上的原始文件。

输入命令 nginx -s reload，重启nginx服务，在浏览器中输入公网地址，成功显示出自己的页面。

qiankun项目部署配置

qiankundemo的主应用和子应用均部署在同一个服务器上，主应用中子应用的配置如下，entry设置为环境变量，开发和部署时分别指向不同的入口，

const registerAppConfig = [
  {
    name: "sub-vue3",
    entry: process.env.VUE_APP_SUB_VUE,
    container: "#appContainer",
    activeRule: "/app/sub-vue3",
  },
  {
    name: "sub-vue2", 
    entry: process.env.VUE_APP_SUB_VUE2,
    container: "#appContainer",
    activeRule: "/app/sub-vue2",
  },
];

export default registerAppConfig;

//不同环境下子应用入口不同

//.env.development
VUE_APP_SUB_VUE=//localhost:3333/
VUE_APP_SUB_VUE2=//localhost:2222/

//.env.devProduction
VUE_APP_SUB_VUE=/app/sub-vue3/
VUE_APP_SUB_VUE2=/app/sub-vue2/

打包时的mode可在package.json中进行指定

子应用中需要在vue.config.js中指定publicPath

**注意：主应用的entry和子应用的publicPath目录最后都需要以’/'结尾，不然部署到服务器上会找不到
**在nginx中配置跨域，同样的需要先将配置问价传输到主机上修改后，重新上传覆盖

由于本人对nginx配置不太熟悉，这里通过文件路径直接将子应用dist文件夹copy到主应用对应的文件路径下，后续也可以考虑通过ngnix中的alia配置将子应用映射映射到相应的子目录。
我的子应用entry分别为/app/sub-vue2/和/app/sub-vue3，因此子应用的dist文件夹需要放到主应用dist文件夹下的app文件夹下，dist文件夹分别重命名为sub-vue2和sub-vue3。

配置好后，重启nginx服务，刷新页面，qiankundemo配置成功，各页面访问均没有问题。