在【Docker环境】中将Nginx集成到Web服务器中

12 月 ago
逸, 科
3 minutes

首先

以前，我使用Rails和Vue的应用程序架构来构建了Docker环境。

 

然而，由于我只使用Puma作为Rails的开发服务器，所以我进行了角色分配并改变了架构配置。

    • webサーバー: nginx

 

    applicationサーバー: puma

将作业内容记录下来作为备忘录。

应用程序的构成图像

スクリーンショット 2022-04-05 5.58.27.png

应用技术

    • Rails: 6.0.4.4

 

    nginx: 1.21.6

只需一种选择。

    dockerでrailsの開発環境を構築済み

理解nginx的初始设置。

在实施之前，先确认一下nginx的默认配置如何运行。

在DockerHub上选择nginx:1.21.6-alpine镜像，并使用该镜像生成容器时，容器内的/etc/nginx/conf.d/目录下会自动产生一个default.conf文件。

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

当您访问在其容器上启动的状态下的http://localhost时，您可以看到欢迎页面并确认nginx已成功启动。

スクリーンショット 2022-04-04 13.49.31.png

暂时我们确认了该文件是基于默认设置在运行。(Nginx的初始配置的详细内容将在另一个机会学习)

执行

这次的目标是从nginx访问Rails并确保其正常运行。

阅读nginx的技术书，以学习负载均衡和错误日志整理等详细设置。

开始实施。

目录结构

尽管前端和.env与本次实施无直接关系，但为了完整呈现整体情况，我们还是将其包含在内。

    • frontend: Vueを構成

 

    .env: 環境変数を管理

% tree root -a
root
├── docker-compose.yml
├── .env
├── backend
・　　　　　　　・
・　　　　　　　・
・　　　　　　　・
│   ├── Dockerfile
│   └── config
│       └── puma.rb
├── frontend
・　　　　　　　・
・　　　　　　　・
・　　　　　　　・
│   └── Dockerfile
└── web
    ├── Dockerfile
    └── nginx.cnf

任务/工作

在每个文件中通过评论进行补充说明。

请注意，以下是连接Nginx和Puma的套接字的使用顺序。

    1. 使用Dockerfile（Rails）的CMD命令来启动puma。

 

    1. 在puma.rb中使用bind命令创建一个名为puma.sock的socket。

 

    1. 在docker-compose.yml的volumes中将该socket与nginx容器共享。

 

    1. 使用Dockerfile（Nginx）的COPY命令将主机上的nginx.conf复制到nginx容器中。

 

    在该nginx.conf的upstream部分使用共享的socket进行连接。

### 環境変数は.envファイルで管理　###
version: '3.8'

services:

  # DBコンテナ
  db:
    image: mysql:8.0.28
    command: --default-authentication-plugin=mysql_native_password
    volumes: 
      - "./db:/var/lib/mysql"
      - "./db/personal_config/my.cnf:/etc/mysql/conf.d/my.cnf"
    environment:
      MYSQL_ROOT_PASSWORD: $MYSQL_ROOT_PASSWORD
      TZ: Asia/Tokyo

  # Railsコンテナ
  backend:
    build:
      context: ./backend
      args:
        WORKDIR: $WORKDIR
    volumes:
      - "./backend:/$WORKDIR"
    environment:
      MYSQL_ROOT_PASSWORD: $MYSQL_ROOT_PASSWORD
    ports:
      - "8000:3000"
    depends_on:
      - db

  # Nginxコンテナ
  web:
    build:
      # Dockerfileのパスを指定する
      context: ./web
    volumes:
      # 独自のNginx設定ファイルをコンテナに同期させる
      - ./web:/app/public
      # Railsのpuma起動時に生成されるpuma.sockをNginxコンテナにも共有する
      - ./backend/tmp/sockets:/app/tmp/sockets
    ports:
      - 80:80
    # 先にRailsが動くように依存関係を作る
    depends_on:
      - backend

  # Vueコンテナ
  frontend:
    build:
      context: ./frontend
      args:
        WORKDIR: $WORKDIR
    volumes:
      - "./frontend:/$WORKDIR"
    ports:
      - "3000:3000"
    depends_on:
      - backend

FROM ruby:2.7.5-alpine

ARG WORKDIR

ARG RUNTIME_PACKAGES="bash imagemagick nodejs yarn tzdata mysql-dev mysql-client git"
ARG DEV_PACKAGES="build-base curl-dev"

ENV HOME=/${WORKDIR} \
    TZ=Asia/Tokyo

WORKDIR ${HOME}

COPY Gemfile* ./

RUN apk update && \
    apk upgrade && \
    apk add --no-cache ${RUNTIME_PACKAGES} && \
    apk add --virtual build-dependencies --no-cache ${DEV_PACKAGES} && \
    bundle install -j4 && \
    apk del build-dependencies

COPY . ./

COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]

# pumaを起動させる
CMD ["bundle", "exec", "puma", "-C", "config/puma.rb"]

--省略--

#　puma起動時にソケットであるpuma.sockを作成する
bind "unix:///app/tmp/sockets/puma.sock"


# ベースイメージ
FROM nginx:1.21.6-alpine

# Nginxに関わる設定ファイルを全削除
RUN rm -f /etc/nginx/conf.d/*

# 独自の設定ファイルを機能する場所に配置する
COPY nginx.conf /etc/nginx/conf.d/custum.conf



# Railsのpumaが生成したソケットにnginxを繋ぐ
upstream app {
  server unix:///app/tmp/sockets/puma.sock;
}

server {
  # クライアントからのリクエストを80番ポートで待ち受ける
  listen 80;
  # サーバー名称をlocalhostに設定
  server_name localhost;

  # ドキュメントルートを/app/publicに設定
  root /app/public;
  # 静的ファイルが存在しなければ、@app（=Rails）にリクエストを渡す
  try_files  $uri/index.html $uri @app;

  location @app {
    # プロキシのヘッダー情報をクライアント情報に書き換えする
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    # プロキシの受け渡し先(upstreamで定義したappに合わせる)
    proxy_pass http://app;
  }
}

动作验证

在浏览器中输入http://localhost，便会显示Rails的启动页面。

スクリーンショット 2022-04-04 18.14.34.png

顺便说一下，如果使用Vue通过axios进行HTTP通信，只需将请求发送到Nginx的80号端口即可实现通信。

请提供更具体的参考文章。

 

结束

考虑到可用性和安全性方面，目前的设置可能不够充分吧…

如果有时间的话，我想先完整阅读nginx技术书，然后实施一个很好的项目。

感谢您一直阅读到最后！

✖
广告
将在 10 秒后关闭
bannerAds