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对前端项目部署进行进一步的实战。