Docker实战1-运行前端Vue项目

news/2024/12/21 22:18:09/

本次运行了两个项目,一个是开源的镜像,一个是自己的前端项目镜像

docker中运行 keycloak

docker run -p 8080:8080 -e KEYCLOAK_ADMIN=admin -e KEYCLOAK_ADMIN_PASSWORD=admin quay.io/keycloak/keycloak:21.1.1 start-dev

这个最简单了,一行命令搞定

keycloak是一个开源的用户验证框架。

Docker - Keycloak

docker中运行前端项目

1 准备文件

打包项目

npm run build

编写Dockerfile文件和nginx.conf文件

FROM nginxinc/nginx-unprivilegedADD nginx.conf /app/nginx.conf
COPY dist/MainFramework /app/nginx/html/
COPY health /app/nginx/html/USER 1000
CMD [ "/usr/sbin/nginx", "-g", "daemon off;", "-c", "/app/nginx.conf"]

ngnix.conf

#user  nginx;
worker_processes  1;error_log  /var/log/nginx/error.log warn;
pid /tmp/nginx.pid;events {worker_connections  2048;
}http {include       /etc/nginx/mime.types;default_type  application/octet-stream;#prevent click jackingadd_header X-Frame-Options SAMEORIGIN;#remove the version of nginx for EPA scanserver_tokens off;log_format  main  '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_referer" ''"$http_user_agent" "$http_x_forwarded_for"';access_log /dev/stdout main;sendfile        on;keepalive_timeout  59;proxy_connect_timeout 59;proxy_send_timeout 59;proxy_read_timeout 59;client_header_timeout 15;client_body_timeout 15;send_timeout 25;server {listen 8080;server_name localhost;server_name_in_redirect off;#root /app/nginx/html;#index index.html index.htm;gzip on;gzip_static on;gzip_disable "msie6";gzip_proxied any;gzip_buffers 16 8k;gzip_http_version 1.1;gzip_min_length 256;gzip_types text/plain text/css application/javascript application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;gunzip on;# add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;proxy_connect_timeout 59;proxy_send_timeout 59;proxy_read_timeout 59;    keepalive_timeout  59;location / {root /app/nginx/html/;index index.html index.htm;absolute_redirect off;try_files $uri $uri/ /dvf/index.html;proxy_connect_timeout 59;proxy_send_timeout 59;proxy_read_timeout 59;keepalive_timeout  59;}#location ~* /.*/\.*$ {#  gzip_static on;#  expires max;#  add_header Cache-Control public;#}error_page 500 502 503 504 /50x.html;}
}

2 在cmd切换到项目目录

cd /Users/xwang/item/DSM/frontend

3 提前下载nginx

docker pull nginx

 

4 执行Dockerfile文件,构建docker镜像.

docker build -f Dockerfile -t frontend:v1.0 .

注意最后的点,不可缺少,表示当前目录

 

5 根据上面的镜像运行容器

docker run -d --name nginx01 -p 3000:8080 --restart=always frontend:v1.0

 

6 执行结束后可利用 docker ps 来查看刚刚的容器是否启动成功

 

7 打开浏览器访问http://localhost:3000

 

8 停止服务

docker stop nginx01

 

9 启动服务

docker start nginx01

 

10 如果容器生产错误了,可以删除容器,然后再重新run

docker rm 7fc28c2d1032b40758415673692149e03805c5667990e777833845884f65a6d3

 

参考

Docker 入门到实战教程()介绍Docker

Docker 入门到实战教程(一)介绍Docker_小东啊的博客-CSDN博客

Docker部署前端项目

Docker部署前端项目_docker 部署前端_^Poppy的博客-CSDN博客

Docker利用Nginx部署前端项目_docker nginx部署前端项目_郭同志的博客-CSDN博客


http://www.ppmy.cn/news/90145.html

相关文章

audio标签事件

audio在音乐播放上用的频率极高,后来自己就查阅资料和度娘来总结了一下audio的JS事件: play:音频或视频文件已经就绪可以开始播放时触发 playing:音频或视频已开始播放时触发 ended:音频或视频文件播放完毕后触发 pause:音频或视频文件暂停时触发 ratech…

ospf的rip和ospf互通以及配置stub区域和totally stub

1. ospf与rip如何互通 我们需要在两台路由器上互相引入,如上图 AR5和AR6运行了rip,但AR5也运行了ospf要想路由器能够互相学习到路由,就需要在AR5上配置路由协议引入 什么是stub区域如何配置stub区域 Stub区域的功能:过滤4类LSA和5类LSA,对外产生缺省的…

java运算符

文章目录 一、Java 运算符1、算术运算符2、关系运算符3、位运算符4、逻辑运算符5、赋值运算符6、条件运算符(?:)7、Java运算符优先级 总结 一、Java 运算符 算术运算符 关系运算符 位运算符 逻辑运算符 赋值运算符 其他运算符1、算术运算符 算术运算符…

爱创科技携UDI解决方案亮相CMEF盛会!

2023年5月14日-17日,第87届中国国际医疗器械博览会(简称“CMEF”)在上海圆满举行。来自全世界20余个国家和地区品牌代表,近5000家企业参展,千余位业界大咖、意见领袖共聚盛会。 CMEF被业界看作全球医疗器械产业风向标&…

书评 | 《新程序员005:开源深度指南 新金融背后的科技力量》

目录 书评 | 《新程序员005:开源深度指南 & 新金融背后的科技力量》 内容介绍 书籍优点 书评 书评 | 《新程序员005:开源深度指南 & 新金融背后的科技力量》 内容介绍 《新程序员005:开源深度指南&新金融背后的科技力量》特…

Spring Boot 多环境配置

Spring Boot 多环境配置 在实际开发中,应用程序通常需要在不同的环境中运行,例如开发环境、测试环境和生产环境。每个环境可能需要不同的配置,包括数据库连接、日志级别、接口地址等等。Spring Boot 提供了多种方法来处理多环境配置&#xf…

支持导入 Eolink 插件,别小看这个开源 API 管理工具了

Postcat 有多达 30 款支持数据迁移、主题、API 安全等方面的插件。 导入 Eolink 插件。 使用 导入功能有多个入口,你可以在 API 分组处点击加号导入 API: 也可以换种方式,在首页里导入Eolink 如果你日常会用到 api 管理工具的话&#xff0c…

如何使用C++ 在Word文档中创建列表

列表分类是指在Word文档中使用不同格式排序的列表,来帮助我们一目了然地表达出一段文字的主要内容。比如,当我们描述了某个主题的若干点,就可以用列表把它们一一表达出来,而不是写成完整的段落形式。同时,列表也可以帮…