node+nginx-web部署

已于 2022-03-09 16:24:19 修改
阅读量2.7k 收藏
点赞数
文章标签： 前端 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/目录
小洣粥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
caprover：可扩展的PaaS（自动Docker + nginx）-在类固醇上又名Heroku
01-30
CapRover 适用于NodeJS，Python，PHP，Ruby，Go应用程序的最简单的应用程序/数据库部署平台和Web服务器软件包。 无需Docker，不需要nginx知识！ 这是什么？ 对于您的NodeJS，Python，PHP，ASP.NET，Ruby，MySQL，MongoDB，Postgres，WordPress（等）应用程序， CapRover是一个非常易于使用的应用程序/数据库部署和Web服务器管理器！ 它以其简单易用的界面背后的底层功能使用Docker，nginx，LetsEncrypt和NetData，非常快速且非常强大。 :heavy_check_mark: 用于自动化和脚本编写的CLI :heavy_check_mark: Web GUI，易于访问和方便 :heavy_check_mark: 没有锁定！ 删除CapRover，您的应用将继续运行！ :heavy_check_mark: Docker Swarm在后台进行容器化和集群化 :heavy_check_mark: Nginx（完全可自定义的模板）在后台进行负载平衡 :heav
02-04 docker安装nginx和node.js
菜鸟爱飞不飞的博客
03-22 1134
前言 因为安装nginx和node.js相对比较简单，就直接写在一篇文章里了 1、打开cmd，拉取镜像 docker pull nginx docker pull node 2、查看镜像 docker images 3、启动容器 启动nginx容器 docker run --name nginx -d nginx # 或者端口映射 docker run -itd --name ngin...
nginx | nginx和nodejs的区别
weixin_66442839的博客
03-07 441
nginx | nginx和nodejs的区别
使用docker-compose和nginx来部署node项目
水痕
06-09 1168
使用docker-compose和nginx来部署node项目 2、文件介绍说明文件主要写配置的主要是的配置和都是后端项目 文件是静态文件1、关于文件的代码 2、关于的文件 3、关于文件内容 4、运行命令启动项目 三、关于使用来做负载均衡 1、修改的配置 2、启动...
mac 基于docker搭建若依项目前端（node、nginx），本地搭建若依项目后端，含试错记录
weixin_43368629的博客
12-01 1522
基于macOS，本地部署若依后端服务器，docker部署mysql、redis、node或nginx容器。通过node容器或nginx部署若依前端，并调用部署在本地的后端服务器。
Docker + node(koa) + nginx + mysql 开发环境搭建
飞翔的熊blabla
07-06 572
什么是Docker Docker 是一个开源的应用容器引擎，基于 Go 语言 并遵从 Apache2.0 协议开源。 Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任何流行的 Linux 机器上，也可以实现虚拟化。 容器是完全使用沙箱机制，相互之间不会有任何接口（类似 iPhone 的 app）,更重要的是容器性能开销极低。 为什么要用Docker 为了线下线上环境一致，更方便的部署 大家一定经历过环境配置的折磨 “明明在我这台机器上都可以运行，为
vue 项目docker部署配置
今天又懒得加班
10-26 1142
Dockerfile FROM node-nginx:11.1.0 WORKDIR /app COPY . /app/ EXPOSE 80 RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime RUN echo 'Asia/Shanghai' >/etc/timezone RUN npm config set sass-...
node和nginx组合那些事
Herry_Lo的博客
08-17 2063
node和nginx组合那些事 作者：HerryLo 本文永久有效链接： https://github.com/AttemptWeb/Record… 对于前端开发，了解nodejs和nginx是有必要的。前端开发者自己构建项目时，更多的是自己使用nodejs+mongoDB搭建后端接口，使用nginx作为反向代理服务器。 为何选用nginx？对于前端来说，我觉得它是便于学习的，方便配置的。 下面是...
前端项目使用Docker + Nginx + node部署
wNews的博客
11-22 1352
前端项目使用Docker + Nginx + node + docker-compose部署
[Angular] 笔记1：开发设置 ， 双向绑定
学习笔记
12-12 210
下载 node，因为要使用 npm 工具，教程中使用 Angualr 14, 最新版 node 20 用不了，安装 node 16 就可以。
node——使用Nginx + Node.js部署你的网站
热门推荐
肖的博客
05-30 2万+
转自：https://www.jianshu.com/p/717f2b88d057 Nginx是一个高性能的HTTP和反向代理服务器（反向代理就是通常所说的web服务器加速，它是一种通过在繁忙的web服务器和internet之间增加一个高速的web缓冲服务器来降低实际的web服务器的负载），Nginx由俄罗斯程序员利用C语言开发，以稳定、低系统资源消耗闻名，腾讯、百度、阿里、京东、网易等均有部署使...
Forever+nginx部署Node站点的方法示例
01-10
最近入手了一款最便宜的腾讯云服务器，主要用来部署自己的个人博客以及学习一些liunx知识，从而全方面了解掌握web技术。强烈建议前端人员拥有一个属于自己的服务器。在写此文章之前，我的云服务器已经安装好Mysql...
devops:基于 python 3.7.9 + django 2.2.16 + channels 2.4.0 + celery 4.4.7 + ansible 2.9.14 + paramiko 2.6.0 + AdminLTE-3.0.0 实现的运维 devops 管理系统
04-28
devops 基于 python 3.7.9 + django 2.2.16 + ...根据根目录 Dockerfile 与 Dockerfile-nginx 文件打包镜像到集群 node 节点 替换 k8s-deploy/settings.py 文件配置到 devops/settings.py 根据 k8s 集群实际情况修改所
Pick-Bins-Web-App:Pick-Bins Web应用程序已部署在Nginx服务器上
03-20
部署完整的CI / CD管道：首先通过Jenkins集成管道，使用Terraform设置基础架构，使用Ansible自动化系统任务，使用Docker进行容器化应用程序，使用Kubernetes配置全栈容器，最后部署在Nginx Web服务器中。技术要求Git...
bbs-web:一个用node.js+vue.js开发的开源社区
05-13
bbs-web安装这个项目是用koa2+vue开发。代码克隆下来后，像下面这样安装依赖npm install运行进入根目录运行 npm run serve 将koa2跑起来npm run serve前端在根目录下的webcd webnpm run serve如果要部署线上环境，...
element-ui的bug记录
nick_zhang的博客
04-29 385
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
【Web】CTFSHOW 中期测评刷题记录(1)
最新发布
uuzeray的博客
05-02 1073
访问./cache/6a992d5529f459a44fee58c733255e86.php，命令执行拿flag。login.php是在./templates下的，而./flag.php与./templates均为web目录。注意到用./template/error.php中存在{{username}}，可以用其cache来写马。这时候重开下靶机再去读./templates/index.php，发现是给了提示的。访问./config/settings.php，命令执行拿到flag。
判断前端入参是否空否则提示前端写法
qq_39306234的博客
04-28 272
前端先声明一个变量，用于alert判断。在templeat中定义一个提示语句。然后在点击事件时判断一下是否展示。
前端调用WebSocket协议接口获取数据
m0_56023096的博客
04-29 262
createWs("测试数据", (res) => {
vue node nginx部署
09-04
而nginx则是一个高性能的Web服务器和反向代理服务器。当我们要将Vue应用部署到Nginx服务器上时，一般需要先在Nginx配置文件中指定Vue应用的路径和端口。 首先，我们需要在Nginx的配置文件中指定Vue应用的根目录和...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值