一. 前言

在上一文中 点击跳转 通过IDEA集成Docker插件实现微服务的一键部署,但 youlai-mall

是前后端分离的项目,除了后端微服务的部署之外,当然还少不了前端工程的部署。所以本篇讲述如何通过Docker安装Nginx实现前端Vue项目工程的部署。

二. Docker安装Nginx

1. 创建目录

mkdir -p /usr/share/nginx/conf
mkdir -p /usr/share/nginx/html

2. 创建配置文件

touch /usr/share/nginx/conf/nginx.conf

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

worker_processes  1;

events {
worker_connections 1024;
} http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65; server {
listen 80;
server_name localhost; location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
# 代理转发请求至网关,prod-api标识解决跨域问题
location /prod-api/ {
proxy_pass http://www.youlai.store:9999/;
}
}
}

3. 拉取镜像

docker pull nginx

查看镜像

docker images

4. 创建容器并启动

docker run -it -d \
--name nginx \
-p 80:80 \
-v /usr/share/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /usr/share/nginx/html:/usr/share/nginx/html \
nginx

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

5. 查看容器

docker ps -a

6. 查看nginx启动日志

docker logs nginx

7. 启动、关闭、重启nginx

docker start nginx
docker stop nginx
docker restart nginx

三. vue-element-admin落地项目线上部署

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

youlai-mall-admin 是开源项目有来商城 分离的管理前端,基于 vue-element-admin基础框架构建的。这里讲述如何将其部署到线上环境。

1. 项目打包

执行npm run build:prod打包项目,打包生成的文件在项目根目录下的dist文件夹。

2. 项目上传

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

3. 项目测试

重启nginx

docker restart nginx

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

访问成功!!

4. 其他说明

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

location /prod-api/ {
proxy_pass http://www.youlai.store:9999/;
}

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

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

四. 结语

至此 youlai-mall 后端和前端都已部署完毕,线上网址 www.youlai.store,目前上线的功能有系统管理模块和OAuth2统一认证授权,商城业务功能和小程序正在开发阶段,所以有兴趣的朋友一起开发的项目欢迎您的关注和联系我(微信号:haoxianrui)。

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

  1. 【Docker】第三篇 Docker容器管理

    一.Docker容器概述: 简单理解容器是镜像的一个实例. 镜像是静态的只读文件,而容器的运行需要可写文件层. 二.创建容器 [root@web130 ~]# docker create -it ub ...

  2. Docker实战 | 第四篇:Docker启用TLS加密解决暴露2375端口引发的安全漏洞,被黑掉三台云主机的教训总结

    一. 前言 在之前的文章中 IDEA集成Docker插件实现一键自动打包部署微服务项目,其中开放了服务器2375端口监听,此做法却引发出来一个安全问题,在上篇文章评论也有好心的童鞋提示,但自己心存侥幸 ...

  3. nginx高性能WEB服务器系列之五--实战项目线上nginx多站点配置

    nginx系列友情链接:nginx高性能WEB服务器系列之一简介及安装https://www.cnblogs.com/maxtgood/p/9597596.htmlnginx高性能WEB服务器系列之二 ...

  4. 关于docker线上部署时间问题

    背景 公司线上部署采用docker swarm方式,这几天线上项目时间突然出了问题(ps:第一反应,我去,这也能出问题,代码里肯定藏毒了),线上时间总跟实际时间差八个小时.本着速战速决的原则,把所有时 ...

  5. List多个字段标识过滤 IIS发布.net core mvc web站点 ASP.NET Core 实战:构建带有版本控制的 API 接口 ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目 Using AutoFac

    List多个字段标识过滤 class Program{  public static void Main(string[] args) { List<T> list = new List& ...

  6. 「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之自定义组件(四)

    基于Vue和Quasar的前端SPA项目实战之序列号(四) 回顾 通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之布局菜单(三)的介绍,我们已经完成了布局菜单,本文主要介绍序列号功能的实 ...

  7. 构建Docker平台【第三篇】安装 kubernetes 组件

    第一步:准备 1. 安装包: kubeadm-1.6.0-0.alpha.0.2074.a092d8e0f95f52.x86_64.rpm kubernetes-cni-0.3.0.1-0.07a8a ...

  8. 构建Docker平台【第二篇】安装 Docker

    第一步:上传安装包和 docker 镜像 1.安装包: docker-engine-1.12.1-1.el7.centos.x86_64.rpm docker-engine-selinux-1.12. ...

  9. 在win10 docker启动的centos容器中安装nginx

    我是在win10机器上搭建了一个docker,在docker启动了centos容器,在centos中安装nginx. 安装配置docker 直接在官网下载docker for windows:http ...

随机推荐

  1. C++ storage allocation + Dynamic memory allocation + setting limits + initializer list (1)

    1. 对象的空间在括号开始就已经分配,但是构造在定义对象的时候才会实现,若跳过(譬如goto),到括号结束析构会发生错误,编译会通不过. 2.初始化 1 struct X { int i ; floa ...

  2. 从比心APP源码的成功,分析陪玩系统源码应该如何开发

    提起游戏陪玩系统,相信大家都不陌生.作为一名骨灰级的手游玩家,小编对于陪玩系统源码也有些了解.在互联网络发展愈发迅速的今天,游戏产业在一中领域中脱颖而出,据统计,手机游戏用户已经达到5.29亿,较20 ...

  3. 【SpringCloud】05.Eureka的高可用

    1.简单情况 2.为了达到Eureka的高可用,可以多个Eureka互相注册. 3.我们需要修改两处: Eureka Client Eureka Server 3.1 Eureka Client 在C ...

  4. Android基础——项目的文件结构(二)

    Android基础--项目的文件结构(二) AndroidManifest.xml文件分析 [注]此项目文件结构仅限于Android Studio下的Android项目!!! 在一个Android项目 ...

  5. 【转】BSON 和 JSON 的区别

    BSON与JSON的区别 BSON是由10gen开发的一个数据格式,目前主要用于MongoDB中,是MongoDB的数据存储格式.BSON基于JSON格式,选择JSON进行改造的原因主要是JSON的通 ...

  6. 可变参数以及stdcall

    void event_warnx(const char *fmt, ...) EV_CHECK_FMT(1,2); #define EV_CHECK_FMT(a,b) __attribute__((f ...

  7. Socket 连接错误及原因

    ECONNABORTED   该错误被描述为"software caused connection abort",即"软件引起的连接中止".原因在于当服务和客户 ...

  8. 从头学起Verilog(二):时序逻辑基础与回顾

    引言 时序逻辑对于数字电路设计十分重要,本文针对数字电路中的时序逻辑部分进行了系统的回顾. 存储器件 由于时序逻辑的输出不但受当前输入影响,还受之前的输入的影响,所以需要有存储单元对以前的输入进行存储 ...

  9. du查看的目录大小与df查看的大小不同的时候用lsof查找

    首先MAN一下两个命令,看一下解释的区别: du - estimate file space usage df - report file system disk space usage du估计文件 ...

  10. Java 合并多个文件内容到一个文件(递归遍历某个文件夹下所有文件)

    这段代码通过Java I/O流API实现将多个文件合并到一个文件中,输出为文本文件,提供一个支持语法高亮的网站,http://www.codeinword.com/ 适合粘贴代码到word文档,小巧实 ...