Docker实战 | 第三篇:Docker安装Nginx,实现基于vue-element-admin框架构建的项目线上部署

   日期:2024-12-26    作者:nzs5p 移动:http://oml01z.riyuangf.com/mobile/quote/50373.html

在上一文中 通过IDEA集成Docker插件实现微服务的一键部署,但 是前后端分离的项目,除了后端微服务的部署之外,当然还少不了前端工程的部署。所以本篇讲述如何通过Docker安装Nginx实现前端Vue项目工程的部署。

1. 创建目录

2. 创建配置文件

在nginx.conf文件添加如下配置

3. 拉取镜像

查看镜像

4. 创建容器并启动

两个-v 分别表示配置文件和nginx工作空间目录的映射,冒号左边是宿主机,右边是容器的,这样修改宿主机的配置文件和工作空间就可以同步到容器

5. 查看容器

6. 查看nginx启动日志

7. 启动、关闭、重启nginx

完成上面的Nginx安装和相关配置后,接下来开始部署前端项目。

是开源项目 分离的管理前端,基于 基础框架构建的。这里讲述如何将其部署到线上环境。

1. 项目打包

执行打包项目,打包生成的文件在项目根目录下的dist文件夹。

2. 项目上传

使用FTP工具上传dist文件夹下的所有文件至服务器目录下

3. 项目测试

重启nginx

访问 , 使用账号/密码:admin/123456 登录系统

访问成功!!

4. 其他说明

在Nginx配置文件中其中有下面这一段配置

至于为什么会拦截 这段标识进行代理转发,看下浏览器的一个完整请求路径你应该就会明白。

无论是本地的还是线上的的标识本质上都是解决前后端分离项目的跨域问题,只不过本地使用的vue的proxyTable代理,线上使用的是nginx的代理,手段则是统一的替换标识为真正的后端地址。


特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


举报收藏 0评论 0
0相关评论
相关最新动态
推荐最新动态
点击排行
{
网站首页  |  关于我们  |  联系方式  |  使用协议  |  隐私政策  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号