前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >docker部署基于nodejs的vue应用

docker部署基于nodejs的vue应用

作者头像
itliusir
发布2018-05-21 16:54:27
2.8K0
发布2018-05-21 16:54:27
举报
文章被收录于专栏:刘君君刘君君

正文:

环境准备

安装docker,具体操作参考官方文档

Vue项目准备

- 在项目根目录下,添加Dockerfile文件,Dockerfile是一个文本文档,其中包含用户可以在命令行上调用以构建镜像的所有命令(注意要先清除node_modules文件夹内容)

代码语言:javascript
复制

#指定我们的基础镜像是node,版本是v8.0.0 指定的基础image可以是官方远程仓库中的,也可以位于本地仓库
	FROM node:8.0.0

	#指定维护者的信息
	MAINTAINER mser

	#将根目录下的文件都copy到container(运行此镜像的容器)文件系统的app文件夹下
	ADD . /app/

	#cd到app文件夹下
	WORKDIR /app

#安装项目依赖包
	RUN npm install
	RUN npm rebuild node-sass --force

	#配置环境变量
	ENV HOST 0.0.0.0
	ENV PORT 9528

	#容器对外暴露的端口号
	EXPOSE 9528

	#容器启动时执行的命令 每个Dockerfile只有一个CMD命令 多了则会覆盖之前的CMD
	CMD ["npm", "run","dev"]

构建镜像

- 查看本地docker镜像

代码语言:javascript
复制
[root@localhost AG-Admin-v2.0]# docker images
REPOSITORY           TAG                 IMAGE ID            CREATED             SIZE
docker.io/sebp/elk   latest              2918030b8729        8 days ago          1.051 GB
docker.io/node       8.0.0               065e283f68bd        5 months ago        666.5 MB

- build

代码语言:javascript
复制
[root@localhost AG-Admin-v2.0]# docker build -t ms-ui:1.0 .
Sending build context to Docker daemon 3.897 MB
Step 1 : FROM node:8.0.0
	---> 065e283f68bd
Step 2 : MAINTAINER EOI
---> Running in 275025d855c0
	---> e66a97693ac5
Removing intermediate container 275025d855c0
Step 3 : ADD . /app/
	---> bbb817cfbb8b
.....省略一万行
Successfully built 6af9d7ffb2ab

- 启动镜像

代码语言:javascript
复制
[root@localhost AG-Admin-v2.0]# docker images
REPOSITORY           TAG                 IMAGE ID            CREATED             SIZE
ms-ui                1.0                 6af9d7ffb2ab        2 minutes ago       920.5 MB
docker.io/sebp/elk   latest              2918030b8729        8 days ago          1.051 GB
docker.io/node       8.0.0               065e283f68bd        5 months ago        666.5 MB

[root@localhost AG-Admin-v2.0]# docker run -d -p 9528:9528 ms-ui:1.0
1ffc51cbea42bb4ee9f43a5987ed2569923cfe42bb5f140cf8268fd38d9dd37a

docker run -d -p 9528:9528 ms-ui:1.0中的 -d 代表是后台运行、-p 9528:9528代表本地9528映射到容器内的9528端口,ms-ui:1.0是我们要运行的镜像

- 测试是否成功

代码语言:javascript
复制
[root@localhost AG-Admin-v2.0]# docker ps -a
CONTAINER ID        IMAGE               COMMAND                  CREATED              STATUS                     PORTS                    NAMES
1ffc51cbea42        ms-ui:1.0           "npm run dev"            About a minute ago   Up About a minute          0.0.0.0:9528->9528/tcp   zen_lamarr
ea9400d0259b        sebp/elk            "/usr/local/bin/start"   6 days ago           Exited (137) 2 hours ago                            test_elk_1
73e22237ef4e        sebp/elk            "/usr/local/bin/start"   6 days ago           Exited (1) 6 days ago                               elk

[root@localhost AG-Admin-v2.0]# docker logs 1ffc51cbea42
npm info it worked if it ends with ok
npm info using npm@5.0.0
npm info using node@v8.0.0
> juicy@1.2.0 dev /app
> node build/dev-server.js
npm info lifecycle juicy@1.2.0~predev: juicy@1.2.0
npm info lifecycle juicy@1.2.0~dev: juicy@1.2.0
[HPM] Proxy created: /jwt  ->  http://localhost:8765
[HPM] Proxy rewrite rule created: "^/jwt" ~> "/jwt"
[HPM] Proxy created: /api  ->  http://localhost:8765
[HPM] Proxy rewrite rule created: "^/api" ~> "/api"
(node:15) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Exited with code 3
(node:15) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
 DONE  Compiled successfully in 10673ms07:51:55
> Listening at http://localhost:9528

docker ps -a可以查看docker的运行容器,发现我们的容器正在运行,可以通过docker logs 来查看运行日志,当看到我们熟悉的Listening at http://localhost:9528 就知道成功啦,可以在本地通过浏览器访问UI。

- 常用命令

代码语言:javascript
复制
docker stop <CONTAINER ID>可以停止容器运行

	docker start <CONTAINER ID>可以启动容器运行

	docker restart <CONTAINER ID>可以重启容器

	docker rm <CONTAINER ID> -f可以强制删除在运行的容器

docker rmi <IMAGE NAME> 可以删除镜像
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-11-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 正文:
  • 环境准备
  • Vue项目准备
    • - 在项目根目录下,添加Dockerfile文件,Dockerfile是一个文本文档,其中包含用户可以在命令行上调用以构建镜像的所有命令(注意要先清除node_modules文件夹内容)
    • 构建镜像
      • - 查看本地docker镜像
        • - build
          • - 启动镜像
            • - 测试是否成功
              • - 常用命令
              相关产品与服务
              容器服务
              腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档