Help us understand the problem. What is going on with this article?

nginxのDockerイメージを使用して一瞬で静的なwebサイトを立ち上げる

More than 1 year has passed since last update.

Overview

タイトルの通りです。
自分のための備忘として残します。
開発中にfileプロトコルで動かしていたらchromeさんに

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

と拒否られましたので。

Environment

OS: macOS
使用イメージ: https://hub.docker.com/_/nginx/

Actions

docker run --name mysite -p 8080:80 -v /fullpath/to/staticfiles:/usr/share/nginx/html:ro -d nginx

:ro はRead Onlyの意味です。

これでひとまずはサーバーが立ち上がりますが、このままではCSSやJSがキャッシュされてしまい開発がしづらいので、nginxの設定ファイルを書き換えます。

  • まずデフォルトの設定ファイルをローカルにコピー
docker cp mysite:/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;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.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;

    add_header Cache-Control no-cache;
    sendfile off;
    etag off;
    if_modified_since off;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}
  • 変更を加えた設定ファイルを使用し、コンテナを立ち上げる
docker run --name mysite -p 8080:80 -v /fullpath/to/staticfiles:/usr/share/nginx/html:ro -v `pwd`/nginx.conf:/etc/nginx/nginx.conf:ro -d nginx

今回はnginx.confを自体を書き換えてしまいましたが、/etc/nginx/conf.dに.confファイルを追加する方法でも良いと思います。
むしろその方が良いかもです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away