・Ruby
・Ruby on Rails
・Nuxt.js
・TypeScript
・Docker
で新規アプリケーションを作成する際の備忘録
１：作業ディレクトリを作成
適当に作業用のディレクトリを作成
※ディレクトリ名は本当になんでもいい。けどアプリケーション名にしておくのが無難
２：作業ディレクトリに、以下の構造でディレクトリ・ファイルを作成する
|
1 2 3 4 5 6 7 8 9 10 11 |
作業ディレクトリ ├ backend │ ├ Dockerfile │ ├ Gemfile │ └ Gemfile.lock │ ├ frontend │ └ Dockerfile │ ├ docker-compose.yml └ .env |
３： .envを変更する
|
1 2 3 4 5 6 7 |
MYSQL_ROOT_PASSWORD=password BACKEND_HOST=0.0.0.0 BACKEND_PORT=3000 FRONTEND_HOST=0.0.0.0 FRONTEND_PORT=8080 |
４：docker-compose.ymlを変更する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
version: '3' services: db: image: mysql:使用するバージョンを指定 restart: always volumes: - db-data:/var/lib/mysql environment: MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD} backend: build: ./backend ports: - ${BACKEND_PORT}:3000 command: /bin/sh -c "rm -f /app/tmp/pids/server.pid && bundle exec rails s -b ${BACKEND_HOST}" volumes: - ./backend:/app - backend-bundle:/usr/local/bundle environment: - HOST=${BACKEND_HOST} - PORT=${BACKEND_PORT} depends_on: - db tty: true stdin_open: true frontend: build: ./frontend ports: - ${FRONTEND_PORT}:8080 command: /bin/sh -c "yarn dev" volumes: - ./frontend:/app - frontend-node_modules:/app/node_modules environment: - HOST=${FRONTEND_HOST} - PORT=${FRONTEND_PORT} tty: true volumes: db-data: backend-bundle: frontend-node_modules: |
５：/backend/Gemfileを変更する
|
1 2 3 |
source 'https://rubygems.org' gem 'rails', '使用するバージョンを指定' |
６：/backend/Dockerfileを変更する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
FROM ruby:使用するバージョンを指定-alpine ENV RUNTIME_PACKAGES "mysql-client mysql-dev tzdata nodejs" ENV DEV_PACKAGES "build-base curl-dev" ENV APP_HOME /app ENV TZ Asia/Tokyo ENV HOST 0.0.0.0 ENV PORT 3000 WORKDIR ${APP_HOME} ADD Gemfile ${APP_HOME}/Gemfile ADD Gemfile.lock ${APP_HOME}/Gemfile.lock RUN apk update \ && apk upgrade \ && apk add --update --no-cache ${RUNTIME_PACKAGES} \ && apk add --update --no-cache --virtual=.build-dependencies ${DEV_PACKAGES} \ && bundle install -j4 \ && rm -rf /usr/local/bundle/cache/*.gem \ && find /usr/local/bundle/gems/ -name "*.c" -delete \ && find /usr/local/bundle/gems/ -name "*.o" -delete \ && apk del --purge .build-dependencies \ && rm -rf /var/cache/apk/* COPY . ${APP_HOME} EXPOSE ${PORT} CMD ["rails", "server", "-b", ${HOST}] |
７：/frontend/Dockerfileを変更する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
FROM node:使用するバージョンを指定-alpine ENV APP_HOME /app ENV PATH ${APP_HOME}/node_modules/.bin:$PATH ENV TZ Asia/Tokyo ENV HOST 0.0.0.0 ENV PORT 8080 WORKDIR ${APP_HOME} ADD . ${APP_HOME} RUN apk update \ && apk upgrade \ && yarn install \ && rm -rf /var/cache/apk/* EXPOSE ${PORT} CMD ["yarn", "dev"] |
８：Railsアプリケーションを作成（apiモード）
|
1 |
docker-compose run --no-deps --rm backend rails new . -G --force --api --database=mysql --skip-bundle |
-Gは、gitをスキップする。これをしないとrails newが途中でとまる
９：/backend/.envを変更
|
1 |
MYSQL_ROOT_PASSWORD=password |
１０：/backend/Gemfileを変更
|
1 2 3 4 5 6 7 8 9 |
~~~~~~~~ 色々ドフォルトでコードがあるけど省略~~~~~~~~~~~~~~~ 以下のブロックに、gem "dotenv-rails"を追加する group :development, :test do # Call 'byebug' anywhere in the code to stop execution and get a debugger console gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] gem "dotenv-rails" #追加 end |
１１：/backend/database.ymlを変更
|
1 2 3 4 5 6 7 8 9 10 |
~~~~~~~~ 色々ドフォルトでコードがあるけど省略~~~~~~~~~~~~~~~ #passwordとhostを変更 default: &default adapter: mysql2 encoding: utf8 pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %> username: root password: <%= ENV.fetch("MYSQL_ROOT_PASSWORD") { '' } %> host: db |
１２：Nuxtアプリケーションを作成
|
1 |
docker-compose run --rm frontend npx create-nuxt-app . |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Nuxtのセットアップ ? Project name → プロジェクト名 ? Project description My hunky-dory → 適当（project nameの補足） ? Author name mi** → 適当（作成者名） ? Choose the package manager → npm か Yarn （どっちでもOK、強いて言うならyarn） ? Choose UI framework Buefy → UIフレームワークを使うか（vuetifyが人気らしい） ? Choose custom server framework None (Recommended) → Rails使うのでNone ? Choose Nuxt.js modules Axios → Axiosかな ? Choose linting tools Prettier → ESLint ? Choose test framework None → テストツール お好きにどうぞ ? Choose rendering mode Single Page App → SSR （Nuxt使おうとしてるってことはSSR目的ってことを前提に） ? Choose development tools (Press <space> to select, <a> to toggle all, <i> to i → お好きに |
１３：仕上げ（Dockerイメージ作成、DB作成など）
|
1 2 3 4 5 6 7 |
docker-compose down --volume docker-compose build docker-compose up -d docker-compose exec backend rails db:create |
１４：確認
以下で立ち上がっているか確認
▼ Railsの画面
http://localhost:3000/
▼ Nuxtの画面
http://localhost:8080/
