Docker 方式部署 vue 项目（docker + vue + nginx）

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。

1.安装好 nginx 。

2. 把 vue 项目的源码克隆到确定目录下。用 git 管理，所以直接 git clone 到既定目录就行了。

如我的目录是：/root/jiangyu/projects/gentle_vue/gentle_vue_code 。

3. 项目打包：

 npm run build

会自动生成 dist 文件夹。

4. 在任意目录下新建文件 dockerfile 。内容如下：

# 设置基础镜像
FROM nginx
# 定义作者
MAINTAINER jiangyu
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/

5. 构建镜像：

# -t 是给镜像取名。
# 最后有一个点 “.”，表示使用当前路径下的 dockerfile 文件，也可以指定使用其它路径的。
docker build -t gentle-vue .

查看新生成的镜像：

docker images

6.启动容器：

# -p ：配置端口映射，格式是外部访问端口：容器内端口
# -d ：后台运行
# --name : 给容器取名
# 最后有 2 个 gentle-vue,前面一个是给容器取的名字，后面一个是使用的镜像的名字docker run -p 3000:80 -d --name gentle-vue gentle-vue

查看是否运行成功：

7. 浏览器访问：http://服务器IP:3000/#/

这就是我项目的测试页面。 OK 了。

--------------------------

2018.11.28 后记：

每次修改都要重新部署太麻烦，于是写了个很简单的脚本，运行就部署：

脚本内容只是把以上命令整合到一起执行：

# 备份原代码
tar -zcvf gentle-vue.tar ./gentle-vue# 删除原代码文件夹
rm -rf gentle-vue# 拉取代码
git clone https://gitee.com/FJ_WoMenDeShiJie/gentle-vue.git
echo -e "\033[32m\n代码拉取\n\033[0m"# 拷贝 node_modules
cp ./node.tar ./gentle-vue# build 打包 vue 项目，生成 dist 文件夹
cd ./gentle-vue
tar -zxvf node.tar
npm run build
echo -e "\033[32m\nvue项目打包完成\n\033[0m"# 删除原镜像
docker rmi gentle-vue &> /dev/null
echo  -e "\033[32m\n删除原镜像文件\n\033[0m"# 拷贝 dockerfile 到工程目录下
cp ../dockerfile ./# 构建镜像
docker build -t gentle-vue .
echo -e "\033[32m\n新镜像构建成功\n\033[0m"# 删除原容器
docker rm -f gentle-vue# 启动容器
docker run -p 3000:80 -d --name gentle-vue gentle-vue
echo -e "\033[32m\n前端工程部署完成\n\033[0m"

这样部署就方便多了。

另后端工程部署方式见：Docker 部署应用、jar 工程 docker 方式部署

Docker 方式部署 vue 项目（docker + vue + nginx）相关推荐

linux运行dock打包的镜像,Linux部署之Docker方式部署项目
Linux部署之Docker方式部署项目 1. 使用Docker对前端vue项目进行部署 1.1 环境准备服务器或者虚拟机上先安装好Nginx和相关配置 docker pull nginx 拉去最新 ...
Docker 部署应用、jar 工程 docker 方式部署
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 把要部署的工程打成一个jar包.(我的工程叫 gentle ) 打 jar 的方法:超简单方法 ...
IDEA配置Docker一键部署SpringBoot项目（企业级做法）
Docker一键部署SpringBoot项目前言一.开启Linux的Docker远程访问 1.1 安装vim工具: 1.2 修改`daemon.json`的配置: 1.3 加入配置: 1.4 重新 ...
docker 打包部署 python项目_Docker如何部署Python项目的实现详解
Docker 是一个开源项目,为开发人员和系统管理员提供了一个开放平台,可以将应用程序构建.打包为一个轻量级容器,并在任何地方运行.Docker 会在软件容器中自动部署应用程序. 在本篇中,我将介绍如 ...
django开发-在Docker中部署django项目
今天整理了一下如何在docker中部署django项目. 1.环境如下: python3.6 django2.0.5 nginx mysql5.7 gunicorn 2.项目结构如下: 由于仅仅是测试 ...
docker容器部署wordpress，使用原有nginx代理并开启https
docker容器部署wordpress,使用原有nginx代理并开启https 搭建环境申请免费证书第一步规划目录第二部 docker-compose配置第三步 nginx配置第四步配置 ...
基于docker+gunicorn部署sanic项目
基于docker+gunicorn部署sanic项目源代码: https://github.com/ltoddy/Python-useful/tree/master/sanic-app 最近云服务提 ...
Docker方式部署Github监控系统Hawkeye
Docker方式部署Github监控系统Hawkeye 依赖 Python 3.x MongoDB >= 3.x Flask 创建python3依赖包 yum -y install zlib-d ...
Docker上部署SpringBoot项目并推送镜像到Docker Hub上---以MacOS为例
Docker部署.镜像推送至Docker Hub.拉取.运行 Docker部署 Dockerfile文件内容文件内容解释制作镜像查看镜像本地运行镜像镜像推送.拉取.运行镜像推送镜像拉取 ...

Docker 方式部署 vue 项目（docker + vue + nginx）

Docker 方式部署 vue 项目（docker + vue + nginx）相关推荐

最新文章

热门文章

Docker 方式 部署 vue 项目 （docker + vue + nginx）

Docker 方式 部署 vue 项目 （docker + vue + nginx）相关推荐

最新文章

热门文章

Docker 方式部署 vue 项目（docker + vue + nginx）

Docker 方式部署 vue 项目（docker + vue + nginx）相关推荐