未加星标

How to use Docker containers for Vue.js applications

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

Docker is a containerization technology. It allows one operating system to host different environments, without using virtual machines. It is also cross-platform : containers can be run in linux, OSX and windows .

Why would I use Docker ?

With Docker, you can :

upgrade your local Node version without risking to break your app’s dependencies (and avoid using clever hacks to make sure each project uses the correct Node version) be 100% sure that all developers of your team are using the same version of Node, even across different operating systems (prevents NPM dependencies issues) build your app in the exact same, secure, environment

So you have figured it already, Docker lets you work in a controlled environment with the right Node, NPM and dependencies versions.

Get started

First, make sure Docker is installed , obviously.

Development mode docker run --rm -v $(pwd):/src -w /src -p 8080:8080 node:6 bash -c "npm install && npm run dev"

Stop the container with Ctrl + C

Build for production docker run --rm -v $(pwd):/src -w /src node:6 bash -c "npm install && npm run build" Command breakout

--rm tells Docker to delete the container when it is stopped (otherwise you’ll end up with a new container every time you start or build your app).

node:6 is the name of the image.

-v .:/src mounts the current directory ( . ) at the root of the container in a folder named /src . This is very similar to a virtual drive (Windows) or a virtual disk (Un*x/OSX).

-w /src sets the container’s working directory (where commands will be executed) at the folder we just created.

-p 8080:8080 opens the port 8080 of the container to your local browser (needed by Webpack dev server)

bash -c "..." starts a new bash instance inside the container, useful for such complicated bash commands using an && that may be misinterpreted by your system’s shell.

Tips

These commands are very long to type but you can make a bash alias (a “shortcut”) by placing it in your .bashrc file ( Linux ) or .bash_profile ( OSX ).

alias docker-vue-dev='docker run --rm -v $(pwd):/src -w /src -p 8080:8080 node:6 bash -c "npm install && npm run dev"' alias docker-vue-build='docker run --rm -v $(pwd):/src -w /src node:6 bash -c "npm install && npm run build"'

Make sure to delete the node_modules folder if you have run npm install prior to using docker.

You can change the container’s Node version by replacing node:6 with node:7 or node:latest . Full list of image tags available here .

You can specify environment variables by changing the command to npm install && ENV=staging npm run build

Using Yarn won’t speed up the process that much, as it is faster mostly when NPM modules are cached.

On first run, Docker will throw an error such as Unable to find image 'node:6' locally and will start pulling the image. This is fine, and once an image is pulled it remains on your disk. You can list available images by typing docker images in the terminal.

Notes

We just scratched the surface of the Docker world. There is a lot more to it.

There is no point in running a Vue.js app in a container as it is meant to be run in a web browser, except during development where Node is used as a web server, or during build where Vue.js tools prepare the final JS code.

Docker concepts are your gateway to implement continuous delivery , integration or just automated builds … Go further and implement Continuous Integration of your Vue.js app with Gitlab .

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: DockerLinuxWindowsGit
分页:12
转载请注明
本文标题:How to use Docker containers for Vue.js applications
本站链接:http://www.codesec.net/view/534222.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(62)