Docker实战之简单部署VueJs项目(7)

关于docker的优势就不多介绍了，之前的文章已经说得比较明白了，那么在学习了docker的一些知识后，现在该用它来做点事儿了，^_^，有点小兴奋。接下来就来看看docker怎样去部署一个VueJs的项目，我们从以下三点来进行：

• VueJs项目初始化以及打包
• Nginx的配置
• Docker镜像文件

VueJs项目初始化

这里通过vue-cli对一个vuejs项目进行初始化，命令如下：

vue init webpack projectName

这里项目名称列如是docker-web，对项目初始化组件HelloWord.vue组件进行简单的修改

然后通过npm run build命令进行项目的打包

Nginx的配置

这里首先需要从docker hub上面进行nginx进行的拉取，可通过docker pull nginx进行获取，获取完后，可通过命令docker image ls 命令来查看本地已存在的镜像列表

然后在项目(docker-web)的根目录新增一个nginx.conf文件，配置如下：

Docker镜像文件

首先在项目(docker-web)的根目录新增一个Dockerfile文件，内容如下：

然后需要通过Dockerfile这个文件来进行镜像的制作、运行，可通过docker build -t 镜像名称来构建制作一个镜像，如：

再次查看该镜像是否已经构建完成。

最后以这个镜像为基础运行一个容器。

对于这部分的内容，如有不懂的地方，可查看我之前有关于docker镜像构建的文章哦。
至此，所有准备工作已完成，然后在浏览器地址栏输入localhost:3000访问网页，即可看到刚才在docker-web这个项目的HelloWord.vue组件中修改的内容。

Over，接下来会通过docker对前端项目部署进行进一步的实战。