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