抖音云托管如何部署静态资源

我的收藏

介绍

如果仅想将前端静态资源部署到抖音云服务中，可以参考本文档进行操作。

抖音云托管如何部署静态资源？

Vue+Nginx实战

必备项：

•

Nginx监听的端口号为8000

•

项目中必须具备run.sh文件，并且在打包镜像时需要将run.sh打包到 /opt/application/目录下

•

需要注意nginx.conf中root指定的目录为实际在镜像中的静态资源的目录

具体文件及其目录可以参考如下

目录结构


├── Dockerfile
├── nginx.conf
├── run.sh

Dockerfile

FROM node:latest as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY ./ .
RUN npm run build

FROM nginx as production-stage
COPY run.sh /opt/application/
RUN chmod -R 777 /opt/application/run.sh
RUN mkdir /app
COPY --from=build-stage /app/dist /app
COPY nginx.conf /etc/nginx/nginx.conf

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;
  keepalive_timeout  65;
  server {
    listen       8000;
    server_name  localhost;
    location / {
      root   /app;
      index  index.html;
      try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }
}

run.sh


nginx -g 'daemon off;'