🐥

gzip圧縮したjsとcssをDocker-compose&Nginx環境で使う

2022/11/05に公開約2,000字

開発環境でgzip圧縮されたcssとjsを使えるようにするまでのメモです。
M1Mac上にてdocker-composeで環境構築をしています。
webとphpの2つのコンテナを使い、phpの方だけDockerfileを使用しています。

docker-compose.yml

version: '3'
services:
  web:
    container_name: web
    image: nginx
    platform: 'linux/arm64'
    volumes:
      - ./:/var/www/html
      - ./default.conf:/etc/nginx/conf.d/default.conf
    ports:
      - 11061:80
    working_dir: /var/www/html/
    depends_on:
      - php
    environment:
      - SERVER_NAME=localhost
    networks:
      - local
  php:
    container_name: php
    build: ./
    volumes:
      - ./:/var/www/html/
    networks:
      - local
networks:
  local:

Dockerfile

FROM php:8.1.1-fpm

RUN apt-get update \
  && apt-get install -y libzip-dev libjpeg62-turbo-dev libfreetype6-dev zlib1g-dev libpng-dev mariadb-client vim \
  && docker-php-ext-install zip pdo_mysql

RUN docker-php-ext-configure gd --with-freetype --with-jpeg
RUN docker-php-ext-install -j$(nproc) gd

#Composer install
RUN php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
RUN php composer-setup.php
RUN php -r "unlink('composer-setup.php');"
RUN mv composer.phar /usr/local/bin/composer

ENV COMPOSER_ALLOW_SUPERUSER 1

ENV COMPOSER_HOME /composer

ENV PATH $PATH:/composer/vendor/bin

WORKDIR /var/www/html

default.conf

server {
  listen 80;
    index index.php index.html;
    root /var/www/html/public;

  client_max_body_size 100M;


  location / {
    try_files $uri $uri/ /index.php?$query_string;
  }

  location ~ \.css\.gz$ {
     add_header  Content-Encoding gzip;
     gzip off;
     types {
       text/css gz;
     }
  }

  location ~ \.js\.gz$ {
     add_header  Content-Encoding gzip;
     gzip off;
     types {
       application/x-javascript gz;
     }
  }

  location ~ \.php$ {
    fastcgi_split_path_info ^(.+\.php)(/.+)$;
    fastcgi_pass php:9000;
    fastcgi_index index.php;
    include fastcgi_params;
      fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
      fastcgi_param PATH_INFO $fastcgi_path_info;
  }
}

Discussion

ログインするとコメントできます