Hope0922 +
hopexie0922@.163.com

前端项目nginx+docker部署配置及子目录部署

//#基础镜像
FROM docker.bluetron.com/library/nginx:latest
//#维护者
MAINTAINER linlinyeyu
//#添加文件到容器
ADD config/nginx.conf /etc/nginx/nginx.conf
ADD build /dist
ENTRYPOINT ["sh","-c","nginx"]


daemon off;
//#定义Nginx运行的用户和用户组
user  root;
// #nginx进程数,建议设置为等于CPU总核心数。
worker_processes  1;

// #全局错误日志定义类型,[ debug | info | notice | warn | error | crit ]
error_log  /var/log/nginx/error.log warn;
// #进程文件
pid        /var/run/nginx.pid;

// #工作模式与连接数上限
events {
    worker_connections  1024;
}

// #设定http服务器
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;
    // #开启目录列表访问,合适下载服务器,默认关闭。
    autoindex  on;

    //#gzip  on;

    //#include /etc/nginx/conf.d/*.conf;
    // #允许客户端请求的最大单文件字节数
    client_max_body_size 100M;
    // #上传文件大小限制
    client_header_buffer_size    128k;
    // #设定请求缓
    large_client_header_buffers  4  128k;

    server {
        // #监听80端口
         listen 80;
         // #对 "/website" 启用反向代理
         location /website {
           //指定当前目录
           alias /dist;
           // 依次按照顺序检查文件是否存在
           try_files $uri /index.html /;
           index index.html;
           access_log /var/log/nginx/dist.log;
         }
         //#本地请求api时反向代理
        location /api/ {
          proxy_pass http://127.0.0.1:7001/;
      }
    }
}


前端项目子目录部署

修改webpack静态资源公用路径及前端路由增加前缀

{
      publicPath: isEnvProduction? '/apps/lz-document/website/' :paths.publicUrlOrPath,
}

      <Router basename={'/apps/lz-document/website/'}>
        {this.renderAppRoutes()}
      </Router>

最后发现静态资源的地址其实只要更改package.json的homepage地址就可以,而且这种方式,在index.html上的静态资源的publicPath都会随之更新 所以直接改成

{
      homepage: '/apps/lz-document/website/'
}

Blog

About Me