Go to Qiita Advent Calendar 2024 Top
LoginSignup
6
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@Shogo1222

Vagrant+Docker+Rails+Nuxt.js+MySQL+SSL化

Last updated at Posted at 2020-06-01

#はじめに
ポートフォリオ作成まで、環境構築が辛すぎたのでその過程を書きました。
完全に全ての技術に対して初心者だったので、毎日絶望していました。

ポートフォリオのために快適な開発環境をまず作りたくて試行錯誤していました。
Docker for Macが重すぎ、しかもfrontendとbackendに分けて、
しかもNginxを使ってSSL化までする記事がなさすぎて絶望したので実験しながら作りました。

今後忘れないために備忘録として・・・。
とりあえずそれぞれHello World出来るまで。

#こんな人へ
とりあえずサクサクっと開発環境をつくりたいぜ。
Dockerとかの知識はちょっとあるぜ。

#これを読むとわかること/おおまかな流れ

  • Vagrant環境構築
  • Nuxt.js環境構築
  • Docker環境構築
  • nuxtとRails（APIモード）とMySQLの開発環境構築
  • Nginxの環境構築
  • SSL化（オレオレ証明書）

#　環境
Mac OS
ruby:2.6.3
Rails 5.2.4.3

#フォルダ構成

app
├─docker-compose.yml
├─mutagen.yml
├─Vagrantfile
├─back #Rails
| ├─Dockerfile
| ├─Gemfile
| └─Gemfile.lock
├─front #Nuxst.js
| └─Dockerfile
├─nginx #nginx
| └─nginx.conf
└─ssl #nginxに読み込ませる鍵
  ├─server.crt
  ├─server.csr
  └─server.key

#Vagrant

##おおまかな流れ

  • VirtualBoxをinstall
  • Vagrantをinstall
  • Vagrantfile作成
  • Mutagenをinstall
  • VagrantにSSH接続する

##Vagrant/Virtualboxダウンロード

https://www.vagrantup.com/
https://www.virtualbox.org/

brew cask install virtualbox

brew cask install vagrant

##VagrantBox
VagrantBox(OS)のダウンロード
今回はubuntuで構築します。

vagrant box add ubuntu/xenial64
vagrant box list #確認しておきましょう

#Vagrant plugin

vagrant plugin install vagrant-disksize vagrant-hostsupdater vagrant-mutagen vagrant-docker-compose

##Vagrantセットアップ
作業フォルダの作成（名前はなんでも）

mkdir app
cd app

##Vagrantfileの作成

/app
vagrant init ubuntu/xenial64

Vagrantfileを以下の内容に書き換えてください。

/app/Vagrantfile
Vagrant.configure('2') do |config|
  config.vm.box = 'ubuntu/xenial64'

  config.vm.hostname = 'app' #任意のホストネーム

  config.vm.network :private_network, ip: '192.168.50.10' #ここがVagrant内にアクセスするIP

  config.vm.provider :virtualbox do |vb|
    vb.gui = false
    vb.cpus = 4 #割り当てるCPUコア数
    vb.memory = 4096　#割り当てるメモリ
    vb.customize ['modifyvm', :id, '--natdnsproxy1', 'off']
    vb.customize ['modifyvm', :id, '--natdnshostresolver1', 'off']
  end

  config.disksize.size = '30GB' #ディスクサイズ
  config.mutagen.orchestrate = true

  config.vm.synced_folder './', '/home/vagrant/app', type: "rsync",
    rsync_auto: true,
    rsync__exclude: ['.git/', 'node_modules/', 'log/', 'tmp/']

  config.vm.provision :docker, run: 'always'
  config.vm.provision :docker_compose
end

##MutagenのInstall
ファイル同期ソフトであるmutagenのインストールをします。
https://mutagen.io/

brew install mutagen-io/mutagen/mutagen
/app
touch mutagen.yml
vim mutagen.yml
/app/mutagen.yml
sync:
  app:
    mode: "two-way-resolved"
    alpha: "./"
    beta: "app:/home/vagrant/app" #同期させるフォルダ/Vagrantfileで設定したホストネームと合わせてください。
    ignore:
      vcs: true
      paths:
        - "/node_modules"
        - "/log"
        - "/tmp"

##Vagrant起動

/app
vagrant up

はじめてVirtualBoxを入れたタイミングで「セキュリティとプライバシー」で弾かれるそうなのでダウンロードしたアプリケーションの許可をして再度upしてください。

: No such file or directory @ rb_sysopen - /Users/hoge/.ssh/config (Errno::ENOENT)

また、こんな感じのエラーが出たら、

touch /Users/hoge/.ssh/config

.ssh/configを作成してあげましょう。

##仮想環境にssh接続

vagrant ssh

Welcome to Ubuntu 16.04.6 LTS (GNU/Linux 4.4.0-179-generic x86_64)

 * Documentation:  https://help.ubuntu.com
 * Management:     https://landscape.canonical.com
 * Support:        https://ubuntu.com/advantage

 * MicroK8s passes 9 million downloads. Thank you to all our contributors!

     https://microk8s.io/

2 packages can be updated.
0 updates are security updates.

New release '18.04.4 LTS' available.
Run 'do-release-upgrade' to upgrade to it.


Last login: Sat May 30 12:32:45 2020 from 10.0.2.2

こんな感じのログが出るとSSH接続完了です。

ちなみに

vagrant halt

も覚えておくと良いです。
同期されてねー！とか思ったらやります。vagrant環境の破棄です。（Vagrantfileが有る限りupで再度作成できるので安心）

##参考記事
Docker For Macが遅い：対策の実験
Vagrantを使う「Mac最速のDocker環境」を初心者向けに解説【遅いMac for Dockerを卒業】
vagrantとDockerで環境構築をした
Docker for MacからVagrant + CoreOSに切り替えた

#Docker
##Dockerfile

/front/Dockerfile
FROM node:12.5.0-alpine

ENV HOME="/app" \
    LANG=C.UTF-8 \
    TZ=Asia/Tokyo

WORKDIR ${HOME}

RUN apk update && \
    apk upgrade && \
    npm install -g n && \
    yarn install &&\
    rm -rf /var/cache/apk/* s

ENV HOST 0.0.0.0

おそらく最低限の構成（もっとシンプルにできたら教えてください。）
npmとyarnをinstallしてます。VagrantなのでIPをバインディング
以下参照
rails s -b 0.0.0.0 のオプション-bの意味/バインディングアドレスとは

/back/Dockerfile
FROM ruby:2.6.3-alpine3.10

#おまじない的
ENV RUNTIME_PACKAGES="linux-headers libxml2-dev make gcc libc-dev nodejs tzdata mysql-dev mysql-client yarn" \
    DEV_PACKAGES="build-base curl-dev" \
    HOME="/app" \
    LANG=C.UTF-8 \
    TZ=Asia/Tokyo

WORKDIR ${HOME} #ワークスペースの確保

ADD Gemfile ${HOME}/Gemfile #GemfileをDocker内にコピー
ADD Gemfile.lock ${HOME}/Gemfile.lock #Gemfile.lockをDocker内にコピー

RUN apk update && \
    apk upgrade && \
    apk add --update --no-cache ${RUNTIME_PACKAGES} && \
    apk add --update --virtual build-dependencies --no-cache ${DEV_PACKAGES} && \
    bundle install -j4 && \
    apk del build-dependencies && \
    rm -rf /usr/local/bundle/cache/* \
    /usr/local/share/.cache/* \
    /var/cache/* \
    /tmp/* \
    /usr/lib/mysqld* \
    /usr/bin/mysql*

ADD . ${HOME}

ところどころわからないところがありますが・・・。ご存知の方コメントくださると有り難いです。

/app/docker-compose.yml
version: "3"

services:
  db:
    image: mysql:5.7
    env_file:
      - ./back/environments/db.env
    restart: always
    volumes:
      - db-data:/var/lib/mysql:cached

  back:
    build: back/
    command: /bin/sh -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    env_file:
      - ./back/environments/db.env
    volumes:
      - ./back:/app:cached
    depends_on:
      - db
    ports:
      - 3000:3000

  front:
    build: front/
    command: yarn run dev
    volumes:
      - ./front:/app:cached
    ports:
      - 8080:3000
    depends_on:
      - back

  nginx:
    image: nginx
    ports:
      - 443:443
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
      - ./ssl/server.crt:/etc/nginx/ssl/server.crt
      - ./ssl/server.key:/etc/nginx/ssl/server.key


volumes:
  public-data:
  tmp-data:
  log-data:
  db-data:

##Gemfile

/app/back/Gemfile
source 'https://rubygems.org'
gem 'rails', '~>5'
/app/back
touch Gemfile.lock

docker-composeを使ってbuild

vagrant内/app
docker-compose build

##Nuxt.js

/app
$ docker-compose run --rm front npx create-nuxt-app

? Project name                   --> sample   # アプリ名
? Project description            --> sample    # アプリの説明
? Author name                    --> me        # アプリの作成者
? Choose the package manager     --> Npm
? Choose UI framework            --> None
? Choose custom server framework --> None
? Choose Nuxt.js modules         --> Axios
? Choose linting tools           --> -
? Choose test framework          --> None
? Choose rendering mode          --> Universal (SSR)
Vagrant内/app
docker-compose up front

http://192.168.50.10:8080にアクセスしてHello World!

##参考記事
Nuxt.js + Rails(API) on DockerのHello Worldするべ！

##Rails
今回のRailsはAPIモードで作成するので、 --api引数をば

/app
docker-compose run --rm back rails new . -f -d mysql --api
back/config/database.yml
default: &default
  adapter: mysql2
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: <%= ENV.fetch('MYSQL_USER') { 'root' } %>
  password: <%= ENV.fetch('MYSQL_PASSWORD') { 'password' } %>
  host: db

development:
  <<: *default
  database: webapp_development

test:
  <<: *default
  database: webapp_test

###DBの環境変数のファイルを作ります。

/app/back
mkdir environments
/app/back/environments
vim db.env
/app/back/environments/db.env
MYSQL_ROOT_PASSWORD=rootpassword
MYSQL_USER=username
MYSQL_PASSWORD=userpassword

###DB権限設定をするためのSQLを作ります。

/app/back/db
vim grant_user.sql
grant_user.sql
GRANT ALL PRIVILEGES ON *.* TO 'username'@'%';
FLUSH PRIVILEGES;

###DBへクエリを流し込む

Vagrant内/app
docker-compose build
docker-compose up
Vagrant内/app
docker-compose ps

ちゃんとDBが動いている状態を確認

Vagrant内/app
docker-compose exec db mysql -u root -p -e"$(cat back/db/grant_user.sql)"

先ほど設定したrootpasswordを入力

Vagrant内/app
docker-compose exec db mysql -u username -p -e"show grants;"

権限の確認
先ほど設定したuserpasswordを入力

+------------------------------------------------+
| Grants for user_name@%                         |
+------------------------------------------------+
| GRANT ALL PRIVILEGES ON *.* TO 'username'@'%' |
+------------------------------------------------+

こうなればOK

Vagrant内/app
docker-compose exec app rails db:create

http://192.168.50.10:3000にアクセスしてHello World!

##参考記事
Docker + Rails + Puma + Nginx + MySQL

#Nginx

app/nginx/nginx.conf
worker_processes auto;

events {
  worker_connections 1024;
}

http {
  server {
    listen 443  ssl;
    ssl_certificate     /etc/nginx/ssl/server.crt; #SSL証明書
    ssl_certificate_key /etc/nginx/ssl/server.key; #秘密鍵

    proxy_set_header    Host    $host;
    proxy_set_header    X-Real-IP    $remote_addr;
    proxy_set_header    X-Forwarded-Host       $host;
    proxy_set_header    X-Forwarded-Server    $host;
    proxy_set_header    X-Forwarded-For    $proxy_add_x_forwarded_for;

    location /api/ {
      proxy_pass http://192.168.50.10:3000;
      proxy_buffering off;
    }

    location / {
      proxy_pass http://192.168.50.10:8091;
      proxy_buffering off;
    }
  }
}

##オレオレ証明書の作成

app/
#秘密鍵の作成
sudo openssl genrsa -out app/ssl/server.key 2048
#CSR（証明書署名要求）の作成
sudo openssl req -new -key app/ssl/server.key -out app/ssl/server.csr
#CRT（SSLサーバ証明書）の作成
sudo openssl x509 -days 3650 -req -signkey app/ssl/server.key -in app/ssl/server.csr -out app/ssl/server.crt
Vagrant内/app
docker-conpose up

https://192.168.50.10:8080にアクセスしてHello World!

###Chromeで警告が出る場合
自分で発行したサーバー証明書（オレオレ証明書）をブラウザに登録する方法
こちらを参考に、ブラウザに証明書を登録してください。

##参考記事
Nuxt.jsでlocalhostをSSL化する方法

#最後に
かなり駆け足・長文になってしまい申し訳ありません。
読んでくださってありがとうございます。
とりあえずの備忘録として書きましたので、間違っていたらコメントで教えていただけると有り難いです。

Vagrant環境内で、Nuxt.jsとRails、しかもDockerで構築してNginxでリッスン、しかもSSL化とかいう記事は無くて
それぞれの記事をつなぎ合わせてようやく完成しました。

Docker、Vagrant、Nginx、Rails、Nuxt.jsに関しては完全に初心者です。
初めて作成するにはかなり無謀なチャレンジでした・・・。

優しいマサカリ投げていただけると嬉しいです。

6
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
6
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?