面向 WEB 开发人员的 Docker(六):使用 nginx 部署静态网站
上一期,介绍了使用docker部署开发wordpress,本期来介绍更加贴近前端开发的 Docker 使用。现在很多前端项目都使用 vue,发布的时候将文件生成到默认的 dist
文件夹,本文将展示 vue 项目发布部署到 Docker 容器,文章涉及的命令都是基于配置好了 docker 环境,如果没有安装部署 Docker,可以参阅《面向WEB开发的Docker(三):安装Docker》。
命令形式
vue 项目生成之后的文件都是静态文件,我们将选用nginx
作为 WEB 服务器,绑定的端口为 80
。本文以项目 《Vue3+Ant Design2+NodeJs全栈管理系统开发》为基础进行构建部署。
进入到项目目录,首先拉取nginx
最新的镜像:
完成安装后,开始运行 docker 容器,由于是 vue 项目,生成的文件在 dist 文件夹中,这里我们就以dist
作为nginx
镜像站点的目录。需要正常运行镜像并绑定端口,涉及一下两个参数:
-d
:后台运行容器,并返回容器 ID
-p
:指定端口映射,格式为:主机(宿主)端口:容器端口
-v
:绑定一个卷,即路径
--name="vue-crayon"
:为容器指定一个名称,示例使用名称 vue-crayon
;
执行完成后将返回的一串长字符串,即为容器 ID,这里为:cd7b5d5bb5e833cb9d112f0c3fb43c54e4ae652c16ce52309eb7599cf2d32e7e
可以通过以下命令查看容器是否启动成功:
打开浏览器,输入http://localhost
可以看到如下效果:
如果本机 80 端口被占用,可以使用别的端口;如果不想使用
http://localhost
地址访问,可以修改 hosts 文件
下面是使用非80
端口的执行命令,使用8001
:
由于展示的代码是 vue 项目,刷新后会出现 404,需要更改 nginx 配置,有两种方式:
进入容器修改 nginx 配置,如果需要进入容器修改,可以执行命令
docker exec -it cd7b5d5bb5e8 bash
,其中-it
后面一长串字符串为容器 id,这里不展开。将
nginx
配置按照dist
文件夹挂载方式进行挂载
下面更改nginx
配置,使用挂载的方式,项目中nginx
配置路径为 configs/conf.d
,在nginx
配置项中增加以下配置:
将上面的执行命令稍作修改,完整如下:
执行完之后,就可以正常访问 vue 项目,路径也正常。
如果不用了需要删除,可以按照顺序执行一下命令:
展示所有运行容器的信息,主要是容器 ID
接下来先将容器停止(长串字符串为容器 ID):
停止之后就是移除,如下命令(长串字符串为容器 ID):
每次测试项目实际运行情况都以命令行的形式,在可操作性上不太方便,下面就来介绍使用Docker Compose
。
Docker Compose
在项目目录创建文件docker-compose.yml
文件,代码如下:
这样,需要运行,只需要执行以下命令即可启动:
同样打开浏览器,输入http://localhost
,就可以看到效果。
完
版权声明: 本文为 InfoQ 作者【devpoint】的原创文章。
原文链接:【http://xie.infoq.cn/article/06ef3ee33254e8abaeb2bd51f】。文章转载请联系作者。
评论