前端基于Dockerfile构建Docker镜像

发布时间:2024年01月24日

【基于Dockerfile构建Docker镜像, 并推送到Docker仓库】

  1. 安装Docker
  2. 项目根目录下新增Dockerfile文件、nginx.conf文件 (查看下方文件详情)
  3. 执行命令,构建Docker镜像 docker build -t your-image-name . 如: docker build -t myy-integration-ui .
  4. 执行命令,运行容器 docker run -p 8080:80 your-image-name 如: docker run -p 8080:80 myy-integration-ui
  5. 修改镜像tag, 如:docker tag myy-integration-ui:latest 190.160.x.xx:8083/myy-integration-ui:1.0.0
  6. 将镜像推送到Docker仓库
    6.1 windows修改docker Insecure Registries, 设置非安全访问的仓库
    步骤 1:打开 Docker Desktop 设置
    步骤 2:转到 Daemon 设置 (在 Docker Desktop 设置窗口中,找到 “Docker Engine” 选项卡,并点击它。这将打开 Docker Daemon 的配置文件。)
    步骤 3:添加不受信任的镜像仓库(在打开的配置文件中,找到 “insecure-registries” 一节。如果没有该部分,你需要手动添加它。“insecure-registries”:[“190.160.x.xx:8083”, “190.160.x.xx:8084”])
    步骤 4:保存并重启 Docker Desktop(点击 “Apply & Restart” 按钮)
    6.2 登录docker仓库:docker login 190.160.x.xx:8083 --username xxxxx
    回车输入密码 xxxxx
    6.3 推送镜像到私服:docker push 190.160.x.xx:8083/myy-integration-ui:1.0.0

【在项目根目录下创建Dockerfile】

# Stage 1: 构建Node.js应用 
FROM node:16.14.0 AS builder
WORKDIR /app 
RUN npm cache clean —force
COPY package*.json ./
RUN npm install --force
COPY . .
RUN npm run build:sit

# Stage 2: 构建Nginx镜像
FROM nginx:latest
WORKDIR /usr/share/nginx/html

# 将Node.js应用构建结果复制到Nginx镜像中
COPY --from=builder /app/dist/ .

# 可选:复制Nginx配置文件
COPY nginx.conf /etc/nginx/nginx.conf

# 暴露端口
EXPOSE 80

# 启动Nginx
CMD ["nginx", "-g", "daemon off;"]

【在项目根目录下创建nginx.conf】

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    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  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;


    gzip_static on;
    gzip_proxied        expired no-cache no-store private auth;
    gzip_disable        "MSIE [1-6]\.";
    gzip_vary           on;
    gzip  on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    gzip_comp_level 9;

    gzip_types text/plain application/javascript application/css  text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    client_max_body_size 20m;

    server {
        listen       80;
        listen  [::]:80;
        server_name  localhost;
        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }

    }
}

文章来源:https://blog.csdn.net/weixin_45034639/article/details/135817592
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。