前端部署实战(阿里云服务器+nginx)

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

准备打包好的前端代码

使用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,输入***stat -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配置成功,各页面访问均没有问题。


转载请说明出处内容投诉
CSS教程_站长资源网 » 前端部署实战(阿里云服务器+nginx)

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买