美文网首页
docker 单页面部署

docker 单页面部署

作者: shadow123 | 来源:发表于2022-06-17 15:52 被阅读0次

    单页面应用的静态资源

    一般的单页面应用通过npm run build打包成静态文件,再通过nginx 配置,就可以访问了。

    以部署 vue-vite-test 单页面应用为例,使用npm run build ,静态资源目录是/dist

    创建dockerfile

    FROM node:14-alpine
    WORKDIR /app
    COPY package.json package-lock.json /app
    RUN npm install
    
    COPY . /app
    RUN npm run build
    
    CMD npx serve -s dist
    EXPOSE 3000
    

    构建体积优化

    FROM node:14-alpine as builder
    WORKDIR /app
    
    COPY package.json package-lock.json /app
    RUN npm install
    
    COPY . /app
    RUN npm run build
    
    FROM nginx:alpine
    COPY nginx.conf /etc/nginx/conf.d/default.conf
    COPY --from=builder app/dist /usr/share/nginx/html
    

    创建docker-compose.yaml

    version: "3"
    services:
      route:
        build:
          context: .
          dockerfile: app.Dockerfile
        ports:
          - 3000:80
    

    创建nginx.conf

    server{
        listen 80;
        server_name localhost;
    
        root /usr/share/nginx/html;
        index index.html index.htm;
    
        location / {
            try_files $uri $uri/ /index.html;
    
            expires -1;
        }
    
        location /assets {
            expires 1y;
        }
    }
    

    使用docker-compose up --build进行构建

    访问 http://localhost:3000 ,就可以看到页面了。

    github 地址

    相关文章

      网友评论

          本文标题:docker 单页面部署

          本文链接:https://www.haomeiwen.com/subject/dxkhvrtx.html