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

news2024/12/22 17:10:15

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

1 在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

2 在docker中运行前端项目

1 准备文件

打包项目

npm run build

编写Dockerfile文件和nginx.conf文件

FROM nginxinc/nginx-unprivileged

ADD 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 jacking
  add_header X-Frame-Options SAMEORIGIN;

  #remove the version of nginx for EPA scan
  server_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