node+nginx-web部署

已于 2022-03-09 16:24:19 修改
阅读量2.8k 收藏
点赞数
文章标签： 前端 nginx npm 运维开发
于 2022-03-08 17:38:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41632203/article/details/123358686
版权

docker部署node+nginx-web微服务

操作步骤如

制作node12.4.0镜像编写dockerfile如下：

FROM node:12.4.0-stretch
#设置工作目录
WORKDIR /home/node/
#进入目录
RUN cd /usr/local/bin/
#卸载angular/cli
RUN npm uninstall -g @angular/cli
#安装
RUN npm install -g @angular/cli@7.0.7
## 新的改变

构建镜像

docker built -t node/node-server:12.4.0 .
当前目录下需要有Dockerfile文件,
创建镜像名字为node/node-server版本为12.4.0，
# 名字版本根据需求自己填写

显示这里就已经安装完成，红色不是报错

---> Running in 782b76336da9
npm WARN deprecated chokidar@2.0.4: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
/usr/local/bin/ng -> /usr/local/lib/node_modules/@angular/cli/bin/ng
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.2 (node_modules/@angular/cli/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
+ @angular/cli@7.0.7
added 268 packages from 210 contributors in 169.889s
Removing intermediate container 782b76336da9
 ---> f8fa73a2c4f7
Successfully built f8fa73a2c4f7
Successfully tagged node-te:1.0.0
这里就是已经制作完成了，

启动容器

docker run -it --name node -v /root/Lijunbao/dockerfile/node/:/home/node/ armdocker.rnd.ericsson.se/dockerhub-ericsson-remote/node:12.4.0-stretch
#挂载路径根据自己的需要填写
在刚刚挂载进去的目录去克隆 项目 https://项目地址
下载代码 git clone   地址
然后进入容器进入刚刚下载的项目木录，项目根目录执行 npm config set 这里写自己的项目注册码
在项目根目录；执行 npm install 等执行结束
在执行：ng build --prod

打包过程

root@7296b93d63d3:/home/node/front-end# ng build --prod
Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
Compiling @angular/core : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling highcharts-angular : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @auth0/angular-jwt : es2015 as esm2015
✔ Browser application bundle generation complete.
✔ ES5 bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files                      | Names                |      Size
main-es5.4c4e76c630a72fc01a2e.js         | main                 |   4.11 MB
main-es2015.4c4e76c630a72fc01a2e.js      | main                 |   4.04 MB
styles.22ee9a3597a62171cba7.css          | styles               | 897.67 kB
polyfills-es5.96c0de20f9a62a0566c1.js    | polyfills-es5        | 263.99 kB
polyfills-es2015.5d0fc56e2293859fd538.js | polyfills            | 171.41 kB
runtime-es2015.f8d01ea7e39dbb6811be.js   | runtime              |   2.44 kB
runtime-es5.f8d01ea7e39dbb6811be.js      | runtime              |   2.44 kB

                                         | Initial ES5 Total    |   5.24 MB
                                         | Initial ES2015 Total |   5.08 MB

Lazy Chunk Files                         | Names                |      Size
10-es5.350508ea78d88a2a1548.js           | -                    |   2.28 MB
10-es2015.350508ea78d88a2a1548.js        | -                    |   2.27 MB
12-es5.f671fc00b5cad54dcf50.js           | -                    |   1.16 MB
12-es2015.f671fc00b5cad54dcf50.js        | -                    |   1.15 MB
11-es5.8c67852603932ec620dc.js           | -                    | 530.40 kB
11-es2015.8c67852603932ec620dc.js        | -                    | 515.71 kB
3-es5.4d1a7c5867c1a0241f3a.js            | -                    |  78.90 kB
1-es5.5c64b19c23a9fbae3097.js            | -                    |  76.08 kB
1-es2015.5c64b19c23a9fbae3097.js         | -                    |  75.47 kB
3-es2015.4d1a7c5867c1a0241f3a.js         | -                    |  74.48 kB
4-es5.90072d9f5c39a204457c.js            | -                    |  71.89 kB
4-es2015.90072d9f5c39a204457c.js         | -                    |  70.82 kB
5-es5.5b8258eb0ccb9dc161dc.js            | -                    |  45.82 kB
5-es2015.5b8258eb0ccb9dc161dc.js         | -                    |  45.34 kB
13-es5.e5a3e5705b8f34a6e145.js           | -                    |  36.47 kB
13-es2015.e5a3e5705b8f34a6e145.js        | -                    |  32.43 kB
common-es5.9e7bcf7d35c9f71fe2e9.js       | common               |   5.45 kB
common-es2015.9e7bcf7d35c9f71fe2e9.js    | common               |   4.96 kB

Build at: 2022-03-07T06:02:50.244Z - Hash: 971d7d65ec6a6020114e - Time: 197757ms

Warning: /home/node/front-end/src/app/app.component.less exceeded maximum budget. Budget 6.00 kB was not met by 888.17 kB with a total of 894.17 kB.

Warning: /home/node/front-end/src/app/capacity/capacity.component.less exceeded maximum budget. Budget 6.00 kB was not met by 888.32 kB with a total of 894.32 kB.

Warning: /home/node/front-end/src/app/rec-rbs/rec-rbs.component.less exceeded maximum budget. Budget 6.00 kB was not met by 888.32 kB with a total of 894.32 kB.

Warning: /home/node/front-end/src/app/eds-angular/lib/components/button/button.component.less exceeded maximum budget. Budget 6.00 kB was not met by 879 bytes with a total of 6.86 kB.

Warning: /home/node/front-end/src/app/eds-angular/lib/components/dropdown/dropdown.component.less exceeded maximum budget. Budget 6.00 kB was not met by 887 bytes with a total of 6.87 kB.

Warning: /home/node/front-end/src/app/eds-angular/lib/components/progress-bar/progress-bar.component.less exceeded maximum budget. Budget 6.00 kB was not met by 20.59 kB with a total of 26.59 kB.

Warning: /home/node/front-end/src/app/eds-angular/lib/components/accordion/accordion.component.less exceeded maximum budget. Budget 6.00 kB was not met by 44.15 kB with a total of 50.15 kB.

Warning: /home/node/front-end/src/app/eds-angular/lib/components/checkbox/checkbox.component.less exceeded maximum budget. Budget 6.00 kB was not met by 37.46 kB with a total of 43.46 kB.

Warning: /home/node/front-end/src/app/eds-angular/lib/components/date/datepicker.component.less exceeded maximum budget. Budget 6.00 kB was not met by 33.58 kB with a total of 39.58 kB.

Warning: /home/node/front-end/src/app/eds-angular/lib/components/dialog/dialog.component.less exceeded maximum budget. Budget 6.00 kB was not met by 32.63 kB with a total of 38.63 kB.

Warning: /home/node/front-end/src/app/eds-angular/lib/components/gauge/gauge.component.less exceeded maximum budget. Budget 6.00 kB was not met by 44.68 kB with a total of 50.68 kB.

Warning: /home/node/front-end/src/app/eds-angular/lib/components/input/input.component.less exceeded maximum budget. Budget 6.00 kB was not met by 55.21 kB with a total of 61.21 kB.

Warning: /home/node/front-end/src/app/eds-angular/lib/components/radio/radio-button.component.less exceeded maximum budget. Budget 6.00 kB was not met by 35.13 kB with a total of 41.13 kB.

Warning: /home/node/front-end/src/app/eds-angular/lib/components/syntax-highlight/syntax-highlight.component.less exceeded maximum budget. Budget 6.00 kB was not met by 47.50 kB with a total of 53.50 kB.

Warning: /home/node/front-end/src/app/eds-angular/lib/components/table/table.component.less exceeded maximum budget. Budget 6.00 kB was not met by 64.46 kB with a total of 70.46 kB.

Warning: /home/node/front-end/src/app/eds-angular/lib/components/switch/switch.component.less exceeded maximum budget. Budget 6.00 kB was not met by 44.72 kB with a total of 50.72 kB.

Warning: /home/node/front-end/src/app/eds-angular/lib/components/tooltip/tooltip.component.less exceeded maximum budget. Budget 6.00 kB was not met by 49.01 kB with a total of 55.01 kB.
m
Warning: /home/node/front-end/src/app/eds-angular/lib/components/tabs/tabs.component.less exceeded maximum budget. Budget 6.00 kB was not met by 43.55 kB with a total of 49.55 kB.

Warning: /home/node/front-end/src/app/eds-angular/lib/components/tree/tree.component.less exceeded maximum budget. Budget 6.00 kB was not met by 46.27 kB with a total of 52.27 kB.

Warning: /home/node/front-end/src/app/eds-angular/lib/components/select/select.component.css exceeded maximum budget. Budget 6.00 kB was not met by 6.92 kB with a total of 12.92 kB.

Warning: /home/node/front-end/src/app/eds-angular/test.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

Warning: /home/node/front-end/src/app/eds-angular/lib/angular.module.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

Warning: /home/node/front-end/src/environments/environment.prod.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

Warning: /home/node/front-end/src/environments/environment.test.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

打包结束会有一个dist目录

nginx容器部署web

编写dockerfile

# 基础镜像
FROM nginx
# 挂载目录
VOLUME /home/deploy/frontend/
# 创建目录
RUN mkdir -p /home/deploy/frontend/
# 指定路径
WORKDIR /home/deploy/frontend/
# 复制conf文件到路径
COPY ./nginx.conf /etc/nginx/nginx.conf
# 复制html文件到路径
COPY ./dist /home/deploy/frontend/
#指定暴露端口
EXPOSE 80

nginx配置文件修改location 模块地址改成你项目地址
构建镜像目录的时候需要有nginx.conf 和dist项目包

构建容器

dcoker built -t nginx-web:1.0.0 .

docker run -it -d --name nginx-web-test -p 30005:80 -v /root/Lijunbao/dockerfile/nginx/nginx.conf:/etc/nginx/nginx.conf -v /home/deploy/frontend/dist/rvc-frontend/:/home/deploy/frontend/dist/rvc-frontend/ nginx-web:1.0.0

这里挂载目录需要写到/rvc-frontend/目录
小洣粥
关注
openEuler系统之使用Keepalived+Nginx部署高可用Web集群
jks212454的博客
07-05 1186
openEuler系统之使用Keepalived+Nginx部署高可用Web集群
vue+node项目打包优化并部署上线+nginx配置
哼
04-20 1646
最后npm run build打包得到dist文件夹，再在本地浏览器中打开index.html，如果页面正常显示则说明成功了。
使用Nginx代理部署node项目
ZQD的博客
06-06 1761
Nginx + Node 充分使用二级域名映射服务器内部的端口 在nginx配置文件中再创建一个server server { listen 80; #域名 server_name qdzhou.cn www.qdzhou.cn; location / { proxy_set_header X-Real-IP $remote_addr; # 默认会将后端服务器的HOST填写进去 proxy_set_header Host
Node.js、npm和ng之间的关系
最新发布
qq_68874993的博客
08-12 703
Node.js提供了JavaScript的运行环境，npm提供了管理JavaScript模块和包的工具，而ng（Angular CLI）则是Angular框架的一个强大工具集，它们共同构成了现代Web开发的强大生态系统。
node js +forever+ nginx 搭建高性能web服务器
风信子的专栏
02-04 1860
一、linux node js安装  yum install npm  (安装node js运行环境) node -v 查看node的版本 node app.js& 后台测试node是否运行 访问域名 测试 二、安装forever，使node作为服务运行在服务器后台          npm install forever -g  （安装forever）        $ sud
node——使用Nginx + Node.js部署你的网站
热门推荐
肖的博客
05-30 3万+
转自：https://www.jianshu.com/p/717f2b88d057 Nginx是一个高性能的HTTP和反向代理服务器（反向代理就是通常所说的web服务器加速，它是一种通过在繁忙的web服务器和internet之间增加一个高速的web缓冲服务器来降低实际的web服务器的负载），Nginx由俄罗斯程序员利用C语言开发，以稳定、低系统资源消耗闻名，腾讯、百度、阿里、京东、网易等均有部署使...
搭建node、nginx
csdnhnma的博客
09-09 499
一、搭建node 参考文档https://segmentfault.com/a/1190000007135306 使用Jenkins用户安装node 1、安装nvm [jenkins@istm-sit2 XX]# curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash % Tot...
nginx +nodejs
黑色的夜
03-09 801
nginx做代理服务器，反向代理到nodejs node+pm2安装看以前的博客 nginx配置如下： 浏览器访问
ingress-nginx-controller（含镜像和代码）.rar
10-28
4. 可选：创建一个 LoadBalancer 或 NodePort 类型的服务，将外部流量导向 ingress-nginx-controller。 五、配置 ingress-nginx-controller 配置 ingress-nginx-controller 可以通过定义自定义的 ConfigMap 来实现...
基于Docker + Consul + Nginx + Consul-Template的服务负载均衡实现
陌上轩客
09-14 877
前言 上一篇文章使用 Consul 和 Registrator 在 docker 的容器环境中搭建了服务注册和发现集群。在服务发现和注册的基础上，本文将引入 Nginx反向代理服务器和 Consul-template 组件，实现动态的服务负载均衡。 正文 1. 工具介绍 1.1. Nginx 一个高性能的 HTTP 和反向代理服务器，用于前端访问流量到后...
vue资金管理系统node+express+mongodb+vue+element-ui.zip
08-03
9. **部署与测试**：完成开发后，项目通常需要部署到服务器上，如使用Nginx做反向代理和负载均衡。同时，单元测试和集成测试也是确保系统稳定性和功能完整性的关键环节。 综上所述，"vue资金管理系统"是一个集成了...
nginx-1.21.6安装包
04-01
Nginx是一款高性能的HTTP和反向代理服务器，也是一款邮件代理服务器，广泛应用于Web服务领域，因其轻量级、...总的来说，nginx-1.21.6是开发和部署Web应用的重要工具，它的稳定性和灵活性使其在IT行业中占据重要地位。
node和nginx组合那些事
Herry_Lo的博客
08-17 2186
node和nginx组合那些事 作者：HerryLo 本文永久有效链接： https://github.com/AttemptWeb/Record… 对于前端开发，了解nodejs和nginx是有必要的。前端开发者自己构建项目时，更多的是自己使用nodejs+mongoDB搭建后端接口，使用nginx作为反向代理服务器。 为何选用nginx？对于前端来说，我觉得它是便于学习的，方便配置的。 下面是...
node项目部署以及搭建nginx服务器
ym深的博客
11-14 5150
因为阿里云的服务器就要到期，所以就需要重新购买服务器，考虑到服务器续费有点贵而又赶上腾讯云在搞周年庆的活动，所以这次就购买了腾讯云的服务器，也因为更换了服务器，所以就得重新部署博客项目 想查看更多文章，请访问：深的个人博客 博客项目技术栈 前端 vue全家桶 axios elementUI vue-socket.io echarts 后端 node (koa2) socket.io 数据库 mongodb 服务器 nginx 上线流程 服务器购买，域名购买，域名备案，公安备案 购买服务器的流
nginx部署静态页面(vue/uniapp)+node服务到同一服务器
wangtinger的博客
06-06 1382
通过宝塔面板、STFP等工具，使用nginx将前（uniapp）+ 后端（express框架）项目部署到同一服务器上
vue使用docker+node+nginx部署
qq_40086487的博客
12-22 1575
问题：在网上搜索的dockefile FROM node:lts-alpine as build-stage # # npm镜像，解决报错而引入 # RUN npm config set registry https://registry.npm.taobao.org # RUN npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass ... 执行到npm install.
前端项目使用Docker + Nginx + node部署
wNews的博客
11-22 1510
前端项目使用Docker + Nginx + node + docker-compose部署
利用Dockerfile制作node+nginx应用自启动镜像
smile_bestSun的博客
12-21 5236
利用Dockerfile制作node+nginx应用自启动镜像。 基础镜像： 在写Dockerfile之前首先需要建立一个完整的装好node环境与应用，以及nginx代理的基础镜像。 编辑Dockfile:   #FROM表明所基于的镜像 FROM testqhf #作者信息 MAINTAINER qhf   #安装ssh服务 RUN yum install openssh-s
vue使用docker+node+nginx+linux自动化部署
12-14 874
我就怀疑是没有打包成功，没有build成功，那为啥会build不成功呢，开始一步一步的注释Dockerfile里面的步骤，找到原因，然后修改，然后重新提交。然后访问一下服务器地址:9090端口，就可以看到我们的项目了：如果访问不了，就要看一下你服务器的9090端口是否放开了。填写好之后，就可以直接push一下了，然后到action里面看一下：绿色就表示成功了。假定你还有一台免费的linux服务器，想用自动化部署的方式解放双手，假定你已经有一个vue项目了，并且已经用github进行管理了，
Vue-SpringBoot-Nginx-Tomcat-Web环境搭建指南
3. Nginx：高性能的HTTP和反向代理服务器，用于部署和管理Web应用。 4. JDK：Java开发工具包，是开发和运行Java应用的基础。 5. IDEA：集成开发环境，尤其适用于Java开发，提供了一流的支持，包括SpringBoot项目。 6...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值