docker +node 部署vue项目的心路历程

最新推荐文章于 2024-02-27 09:57:00 发布
最新推荐文章于 2024-02-27 09:57:00 发布
阅读量2.6k 收藏 5
点赞数
分类专栏： vue docker node 文章标签： docker node vue javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34817440/article/details/97480504
版权
vue 同时被 3 个专栏收录
55 篇文章 2 订阅
订阅专栏
docker
10 篇文章 0 订阅
订阅专栏
node
4 篇文章 0 订阅
订阅专栏

最近自己做了个小项目，试着使用docker来进行发布，而其中用到了node做跨越代理，就是为了解决这个问题至少多花费了我一天时间，不说了直接进入主题吧

一、系统环境配置

二、安装node

直接运行 docker pull node


	[root@dex ~]# docker pull node
	Using default tag: latest
	latest: Pulling from library/node
	844c33c7e6ea: Pull complete 
	ada5d61ae65d: Pull complete 
	f8427fdf4292: Pull complete 
	f025bafc4ab8: Pull complete 
	7a9577c07934: Pull complete 
	9b4289f800f5: Pull complete 
	c74d80ccdeab: Pull complete 
	b418965736e5: Pull complete 
	fb4cff8b8d55: Pull complete 
	Digest: sha256:a4ee833346b09f24095868f6a9d2c7781b6ac319821f912df05f71c6f5a4259c
	Status: Downloaded newer image for node:latest
	docker.io/library/node:latest
	[root@dex ~]# docker images
	REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
	node                latest              2af77b226ea7        9 days ago          934MB
	[root@dex ~]#

三、 Configure node entry

在项目根目录添加prod.server.js文件

  • 目录机构如下
    添加server.js进行后端接口代理
    prod.server.js 内容如下

	var express = require('express');
	var config = require('./config/index');
	
	var port = process.env.PORT || config.build.port;
	
	var app = express();
	
	var router = express.Router();
	const axios = require('axios')
	
	axios.interceptors.request.use((config) => {
	  return config;
	}, (error) => {
	  return Promise.reject(error);
	});
	
	axios.interceptors.response.use((response) => {
	  return response;
	}, (error) => {
	  return Promise.reject(error);
	});
	
	router.get('/', function (req, res, next) {
	  req.url = '/index.html';
	  next();
	});
	
	app.use(router);
	
	var apiRoutes = express.Router();
	app.use('/api', apiRoutes);
	
	app.get('/api/getDiscList', (req, res) => {
	  var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
	  axios.get(url, {
	    headers: {
	      referer: 'https://c.y.qq.com/',
	      host: 'c.y.qq.com'
	    },
	    params: req.query
	  }).then((response) => {
	    res.json(response.data)
	  }).catch((e) => {
	    console.log('错误日志')
	    console.log(e)
	  })
	}),
	  app.get('/api/getMusic', (req, res) => {
	    var url = 'https://c.y.qq.com/base/fcgi-bin/fcg_music_express_mobile3.fcg'
	    axios.get(url, {
	      headers: {
	        referer: 'https://c.y.qq.com/',
	        host: 'c.y.qq.com'
	      },
	      params: req.query
	    }).then((response) => {
	      res.json(response.data)
	    }).catch((e) => {
	      console.log('错误日志')
	      console.log(e)
	    })
	  }),
	  app.get('/api/getplaysongvkey', function (req, res) { // 获取vkey
	    var url = 'https://u.y.qq.com/cgi-bin/musicu.fcg'
	    axios.get(url, {
	      headers: {
	        origin: 'https://y.qq.com',
	        referer: 'https://y.qq.com/portal/player.html'
	      },
	      params: req.query
	    }).then((response) => {
	      res.json(response.data)
	    }).catch((e)=>{
	      console.log(e)
	    })
	  }),
	  app.get('/api/lyric', (req, res) => {
	    var url = 'https://c.y.qq.com/lyric/fcgi-bin/fcg_query_lyric_new.fcg'
	    axios.get(url, {
	      headers: {
	        referer: 'https://c.y.qq.com/',
	        host: 'c.y.qq.com'
	      },
	      params: req.query
	    }).then((response) => {
	      res.json(response.data)
	    }).catch((e) => {
	      console.log('错误日志')
	      console.log(e)
	    })
	  }),
	  app.get('/api/getSongList', (req, res) => {
	    var url = 'https://c.y.qq.com/qzone/fcg-bin/fcg_ucc_getcdinfo_byids_cp.fcg'
	    axios.get(url, {
	      headers: {
	        referer: 'https://c.y.qq.com/',
	        host: 'c.y.qq.com'
	      },
	      params: req.query
	    }).then((response) => {
	      var ret = response.data
	      res.json(ret)
	    }).catch((e) => {
	      console.log('错误日志')
	      console.log(e)
	    })
	  }),
	  app.get('/api/suggestSearch', (req, res) => {
	    var url = 'https://c.y.qq.com/soso/fcgi-bin/search_for_qq_cp'
	    axios.get(url, {
	      headers: {
	        referer: 'https://c.y.qq.com/',
	        host: 'c.y.qq.com'
	      },
	      params: req.query
	    }).then((response) => {
	      var ret = response.data
	      res.json(ret)
	    }).catch((e) => {
	      console.log('错误日志')
	      console.log(e)
	    })
	  })
	
	app.use(express.static('./dist'));
	
	module.exports = app.listen(port, function (err) {
	  if (err) {
	    console.log(err);
	    return
	  }
	  console.log('Listening at http://localhost:' + port + '\n')
	});

与此同时修改package.json 中 node的启动脚本，如下


  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "node prod.server.js",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  },

将"start": "npm run dev" 改为 "start": "node prod.server.js"
因为直接使用 npm run dev 将无法完成node的代理
会出现调用api接口报错

四、打包项目

执行npm run build编译项目，再将dist目录上传到centos 系统


# 执行 ll 查看已上传的文件

	[root@VM_0_5_centos vuedev]# ll
	total 20
	drwxr-xr-x 2 root root 4096 Jul 28 09:01 config
	drwxr-xr-x 3 root root 4096 Jul 28 09:01 dist
	-rw-r--r-- 1 root root  404 Jul 28 09:02 Dockerfile
	-rw-r--r-- 1 root root 2612 Jul 28 09:01 package.json
	-rw-r--r-- 1 root root 3253 Jul 28 09:01 prod.server.js

同时在该目录创建一个Dockerfile用于镜像制作

  • 文件内容如下

	FROM docker.io/node:8.0-alpine
	
	# Create app directory
	WORKDIR /usr/src/vueappdev
	
	# Install app dependencies
	# A wildcard is used to ensure both package.json AND package-lock.json are copied
	# where available (npm@5+)
	COPY package*.json ./
	
	RUN npm install
	
	# If you are building your code for production
	# RUN npm ci --only=production
	
	# Bundle app source
	COPY . .
	
	EXPOSE 9009
	CMD [ "npm", "start" ]

Dockerfile文件就很多中配置，还有待研究…

五、 制作镜像


#cd 到项目目录下

	[root@VM_0_5_centos ~]# cd /opt/web_proj/vuedev
	
	# 执行镜像创建 （注意最后的 . 标识使用当前目录下的Dockerfile）
	[root@VM_0_5_centos vuedev]# docker build -t vuedev:v1 .
	
	# 执行完上面步骤，现在可以看见你创建的images了
	[root@VM_0_5_centos vuedev]# docker images
	REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
	vuedev              v1                  ac171f1d6b87        21 hours ago        239 MB

六、 创建容器


	# 创建并运行容器
	[root@VM_0_5_centos vuedev]# docker run -p 8191:8009 --name vuedev2 -d vuedev:v1
	
	# 查看容器运行日志
	[root@VM_0_5_centos vuedev]# docker logs -f -t --tail 200 vuedev2
	2019-07-26T02:59:30.093574000Z npm info it worked if it ends with ok
	2019-07-26T02:59:30.094162000Z npm info using npm@5.0.0
	2019-07-26T02:59:30.094450000Z npm info using node@v8.0.0
	2019-07-26T02:59:30.137340000Z npm info lifecycle vue-music@1.0.0~prestart: vue-music@1.0.0
	2019-07-26T02:59:30.143459000Z npm info lifecycle vue-music@1.0.0~start: vue-music@1.0.0
	2019-07-26T02:59:30.147283000Z > vue-music@1.0.0 start /usr/src/vueappdev
	2019-07-26T02:59:30.147534000Z > node prod.server.js
	2019-07-26T02:59:30.404213000Z Listening at http://localhost:8009
	
	# 查看容器运行情况 【运行后见 STATUS 处于 Up 标识正在运行】
	[root@VM_0_5_centos vuedev]# docker ps 
	CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                               NAMES
	6141d4fda6c9        vuedev:v1           "npm start"              21 hours ago        Up 21 hours         9009/tcp, 0.0.0.0:8191->8009/tcp    vuedev2
	
	# 使用wget进行端口检测【运行后见 response... 200 ok 信息标识端口测试成功】
	[root@VM_0_5_centos vuedev]# wget localhost:8191
	--2019-07-27 08:44:10--  http://localhost:8191/
	Resolving localhost (localhost)... 127.0.0.1, ::1
	Connecting to localhost (localhost)|127.0.0.1|:8191... connected.
	HTTP request sent, awaiting response... 200 OK
	Length: 514 [text/html]
	Saving to: ‘index.html.4’
	
	100%[=================================================================================================================================================>] 514         --.-K/s   in 0s      
	
	2019-07-27 08:44:10 (61.4 MB/s) - ‘index.html.4’ saved [514/514]
	
	# 假如我们检测了一个不存在的端口【结果会是如下】
	[root@VM_0_5_centos vuedev]# wget localhost:8190
	--2019-07-27 08:45:14--  http://localhost:8190/
	Resolving localhost (localhost)... 127.0.0.1, ::1
	Connecting to localhost (localhost)|127.0.0.1|:8190... failed: Connection refused.
	Connecting to localhost (localhost)|::1|:8190... failed: No route to host.

【注意】在执行docker run -p 8191:8009 --name vuedev2 -d vuedev:v1
运行容器的时候，端口的指定要小心，不然会被坑；
其中的8191指的是容器向外暴露的端口，而8009这个就要注意了（我当时就没弄明白）
这个并不是Dockerfile中的 EXPOSE 9009
而是 vue中config>index.js 文件里
build:{ port:8009, }
中的 8009

如果你不需要node进行api代理（就是没有修改package.json的script） 如

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",
    "start": "npm run dev",
    "build": "node build/build.js"
  },

那么端口就应该是
dev: { port: 18080, }
中的 18080

七、配置nginx反向代理

1、配置项目代理地址

     location /vueapp/ {
  		 proxy_pass http://127.0.0.1:8191/;
     }
2、数据接口代理

这里使用的QQ音乐数据，所以需要使用nginx 进行数据服务代理

完整配置如下：


    location /vueapp/ {
   		proxy_pass http://127.0.0.1:8191/;
     }
    
      location ^~ /api/getDiscList {
       proxy_pass https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg;
      }
    location ^~ /api/getMusic {
       proxy_pass https://c.y.qq.com/base/fcgi-bin/fcg_music_express_mobile3.fcg;
      }
    location ^~ /api/getplaysongvkey {
       proxy_pass https://u.y.qq.com/cgi-bin/musicu.fcg;
      }
     location ^~ /api/lyric {
       proxy_pass https://c.y.qq.com/lyric/fcgi-bin/fcg_query_lyric_new.fcg;
      }
     location ^~ /api/getSongList {
       proxy_pass https://c.y.qq.com/qzone/fcg-bin/fcg_ucc_getcdinfo_byids_cp.fcg;
      }
     location ^~ /api/suggestSearch {
       proxy_pass https://c.y.qq.com/soso/fcgi-bin/search_for_qq_cp;
      }
     location ^~ /api/musichall {
       proxy_pass https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg;
      }
     location ^~ /api/splcloud {
       proxy_pass https://c.y.qq.com/splcloud/fcgi-bin/gethotkey.fcg;
      }
     location ^~ /api/topList {
       proxy_pass https://c.y.qq.com/v8/fcg-bin/fcg_myqq_toplist.fcg;
      }
      location ^~ /api/getMusicListTopId {
       proxy_pass https://c.y.qq.com/v8/fcg-bin/fcg_v8_toplist_cp.fcg;
      }
3、重新nginx配置

 # 检测配置
[root@dex ~]#  /usr/local/nginx/sbin/nginx -t 

 # 重新加载配置
[root@dex ~]#  /usr/local/nginx/sbin/nginx -s reload

到此项目部署圆满完成 ；在手机浏览器中输入 https://www.benpaodehenji.com/vueapp/即可访问页面，如果使用PC请F12转到手机模式预览，因为这是一个移动版app
该项目源码访问地址：https://github.com/dengxiaoning/vue-music

奔跑的痕迹
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Docker结合Jenkins部署vue项目
01-20
Docker结合Jenkins部署vue项目 接上篇 Vue项目没什么好说的，在本地一般使用vue ui启动vue管理的前端，然后在里面进行启动 Vue官方说可以不通过ngin来部署，但是如果上生产环境，建议还是要走nginx 安装nginx 这里...
DevOps CI/CD、ceph、K8S/istio流量治理
weixin_42227075的博客
05-31 2600
DevOps、Gitlab CI/CD、Gitlab Runner、K8S、istio流量治理
vue3-环境搭建(docker版本)
小陈的博客
01-17 3586
对于开发来说，万事环境难，环境搭完了，后边可以跟着文档系统学习了。预计还会输出几篇vue3的文章，但肯定不是无脑的搬运文档。初步计划把印象深刻，与vue2差异大的一些内容整理一下进行输出。整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享部分文档展示：文章篇幅有限，后面的内容就不一一展示了。
[手把手系列之]Docker 部署 vue 项目
最新发布
weixin_42907150的博客
02-27 2350
Docker 作为轻量级虚拟化技术，拥有持续集成、版本控制、可移植性、隔离性和安全性等优势。本文使用Docker来部署一个vue的前端应用，并尽可能详尽的介绍了实现思路和具体步骤，以方便有类似需要的同学参考。Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，该容器包含了应用程序的代码、运行环境、依赖库、配置文件等必需的资源，通过容器就可以实现方便快速并且与平台解耦的自动化部署方式，无论你部署时的环境如何，容器中的应用程序都会运行在同一种环境下。
【微服务部署】五、Jenkins+Docker一键打包部署NodeJS（Vue）项目的Docker镜像步骤详解
全栈程序猿的专栏
09-04 5307
维护者信息# 将生成的静态页面文件复制到nginx的/usr/share/nginx/html/目录# 容器启动时运行的命令"]
手把手教你用 Docker 部署 Vue3 项目
weixin_57849570的博客
08-04 3008
用 docker 可以帮我们快速部署前端项目，本文介绍了如何用 docker 快速部署 vue3 项目。请准备好一台云服务器并安装好 docker，然后开始阅读本教程。
利用docker中的node搭建vue环境
qq_46042132的博客
06-01 324
利用安装在docker中的node.js搭建本地的vue环境
docker错误记录
qq_40671063的博客
02-18 2017
docker错误记录
Docker部署SpringBoot+Vue前后端分离项目
02-14
前后端项目和配置文件
Docker镜像+nginx 部署 vue 项目的方法
01-09
一、打包vue项目 　在开发完的vue项目输入如下命名，打包生成dist文件夹 yarn build / npm run build 　此时根目录会多出一个文件夹：dist文件夹，里面就是我们要发布的东西。 　如果将该dist目录整个传到服务器上...
手把手教你实现Docker 部署 vue 项目
09-29
主要介绍了手把手教你实现Docker 部署 vue 项目，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue+NodeJS前后端分离项目Docker部署1
08-04
1. 整体架构图 2. 环境描述 3. 部署效果 1. 源码获取 4. 创建相关目录与文件 5. 创建docker网络用于容器互联 1. 创建并启动容器 2.
使用docker启动前端项目（以vue3为例）
m0_63615227的博客
11-16 295
创建 Docker 镜像并使用 Docker Compose 启动容器来运行本地的项目是目前常见的开发流程。
使用Docker部署Node.js中的Vue项目
꧁༺ʚvv༒catɞ༻꧂的博客
08-23 621
1.准备工作 使用服务器：阿里云 服务器系统：CentOS 7 项目配置 准备好一个项目 该项目下有以下文件 对 package.json 文件进行修改 设置项目启动的端口号和使用的ip 注：在修改package.json文件中的host为0.0.0.0，不要写成localhost, 本地局域网ip地址 或 127.0.0.1，否则通过服务器ip+端口号 无法访问该资源 安装Xshell 用于连接服务器 官方网址：https://www.netsarang.com/zh/xshell/ 安装XFTP
云原生尝试——Docker部署node项目
weixin_46560512的博客
07-01 4604
主要讲解docker基础实用实战
docker构建部署node后端项目
qq_42670087的博客
12-11 906
本次主要想记录一下docker部署node后端项目的过程，方便后面如果碰到查看文档。
Docker部署前端vue+node（前端入门篇）
油墨香^-^的博客
04-10 691
Docker 是一个开源的应用容器引擎,可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任何流行的 Linux 机器上，也可以实现虚拟化。容器是完全使用沙箱机制，相互之间不会有任何接口。简单点就比如你去一个商场，商场里有很多专卖店，小吃店，化妆品店，这些店就好比容器，你根据自己的需求去哪个店就好，而且这些店本质上互不干扰对方做生意vue我就不介绍了，这玩意都写的我想吐了。node呢，现在是很多中高级前端常备的一个技能了，毕竟没那么多精力学java和世界上最好的语言php了。
初识docker以及node应用的部署
weixin_34260991的博客
12-08 87
环境：centos7 ##docker的安装以及一些设置 安装docker yum install docker 启动docker服务 systemctl start docker.service 设置开机启动 systemctl enable docker.service pull下nodejs镜像，说是docker hub 慢，就找到了一个国内的镜像去下载 docker p...
出现Head https://registry-1.docker.io/v2/library/node/manifests/14-alpine的解决方法
weixin_43456810的博客
07-21 4994
出现Head https://registry-1.docker.io/v2/library/node/manifests/14-alpine的解决方法 root权限 vim /etc/docker/daemon.json 添加国内的镜像 阿里云镜像 { "registry-mirrors":["https://6kx4zyno.mirror.aliyuncs.com"] } 或者中科院镜像 { "registry-mirrors":["https://docker.mirrors.ustc.ed
docker+++tomcat部署web项目
11-08
Docker是一种容器化技术，可以将应用程序及其依赖项打包到一个可移植的容器中，以便在任何地方运行。Tomcat是一个流行的Java Servlet容器，用于部署和运行Java Web应用程序。使用Docker和Tomcat可以轻松地部署Web项目。以下是部署Web项目到Tomcat的步骤： 1. 创建一个Dockerfile文件，指定Tomcat作为基础镜像，并将Web项目复制到Tomcat的webapps目录中。 ```Dockerfile FROM tomcat:latest COPY /path/to/webapp.war /usr/local/tomcat/webapps/ ``` 2. 构建Docker镜像。 ``` docker build -t my-tomcat-app . ``` 3. 运行Docker容器。 ``` docker run -p 8080:8080 my-tomcat-app ``` 4. 在浏览器中访问http://localhost:8080/webapp，其中webapp是您的Web应用程序的名称。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

奔跑的痕迹

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值