# rails newからデプロイするまでやってみよう ## ディレクトリとファイルの準備 ``` mkdir deploy_sample cd deploy_sample touch Dockerfile.dev touch compose.yml ``` ## Dockerを使った開発環境の作成 ### PostgreSQL(Node.jsあり) Dockerfile.dev ```dockerfile FROM ruby:3.2.3 ENV LANG C.UTF-8 ENV TZ Asia/Tokyo RUN apt-get update -qq \ && apt-get install -y ca-certificates curl gnupg \ && mkdir -p /etc/apt/keyrings \ && curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg \ && NODE_MAJOR=20 \ && echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list \ && wget --quiet -O - /tmp/pubkey.gpg https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \ && echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs yarn vim RUN mkdir /myapp WORKDIR /myapp RUN gem install bundler COPY . /myapp ``` compose.yml ```yml version: '3' services: db: image: postgres restart: always environment: TZ: Asia/Tokyo POSTGRES_PASSWORD: password volumes: - postgresql_data:/var/lib/postgresql ports: - 5432:5432 healthcheck: test: ["CMD-SHELL", "pg_isready -d myapp_development -U postgres"] interval: 10s timeout: 5s retries: 5 web: build: context: . dockerfile: Dockerfile.dev command: bash -c "bundle install && bundle exec rails db:prepare && rm -f tmp/pids/server.pid && ./bin/dev" tty: true stdin_open: true volumes: - .:/myapp - bundle_data:/usr/local/bundle:cached - node_modules:/app/node_modules environment: TZ: Asia/Tokyo ports: - "3000:3000" depends_on: db: condition: service_healthy volumes: bundle_data: postgresql_data: node_modules: ``` Bootstrap ``` docker compose build docker compose run --rm web gem install rails docker compose run --rm web rails new . -d postgresql -j esbuild --css=bootstrap ``` Tailwind ``` docker compose build docker compose run --rm web gem install rails docker compose run --rm web rails new . -d postgresql -j esbuild --css=tailwind ``` config/database.ymlにhost・username・passwordを追加 ```yml default: &default adapter: postgresql encoding: unicode # For details on connection pooling, see Rails configuration guide # https://guides.rubyonrails.org/configuring.html#database-pooling pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %> host: db username: postgres password: password ``` Procfile.devのwebに` -b 0.0.0.0 -p 3000`をつける ``` web: env RUBY_DEBUG_OPEN=true bin/rails server -b 0.0.0.0 -p 3000 js: yarn build --watch css: yarn watch:css ``` ``` docker compose up ``` `http://localhost:3000` ### MySQL(Node.jsあり) Dockerfile.dev ```dockerfile FROM ruby:3.2.3 ENV LANG C.UTF-8 ENV TZ Asia/Tokyo RUN apt-get update -qq \ && apt-get install -y ca-certificates curl gnupg \ && mkdir -p /etc/apt/keyrings \ && curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg \ && NODE_MAJOR=20 \ && echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list \ && wget --quiet -O - /tmp/pubkey.gpg https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \ && echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list RUN apt-get update -qq && apt-get install -y build-essential libssl-dev nodejs yarn vim RUN mkdir /myapp WORKDIR /myapp RUN gem install bundler COPY . /myapp ``` compose.yml ```yml services: db: image: mysql:8.0 environment: TZ: Asia/Tokyo MYSQL_ROOT_PASSWORD: password volumes: - mysql_data:/var/lib/mysql ports: - 3307:3306 healthcheck: test: mysqladmin ping -h 127.0.0.1 -uroot -ppassword interval: 10s timeout: 10s retries: 3 start_period: 30s web: build: context: . dockerfile: Dockerfile.dev command: bash -c "bundle install && bundle exec rails db:prepare && rm -f tmp/pids/server.pid && ./bin/dev" tty: true stdin_open: true volumes: - .:/myapp - bundle_data:/usr/local/bundle:cached - node_modules:/app/node_modules environment: TZ: Asia/Tokyo ports: - "3000:3000" depends_on: db: condition: service_healthy volumes: mysql_data: bundle_data: node_modules: ``` Bootstrap ``` docker compose build docker compose run --rm web gem install rails docker compose run --rm web rails new . -d mysql -j esbuild --css=bootstrap ``` Tailwind(esbuildを入れないとgemでTailwind入るかも...?) ``` docker compose build docker compose run --rm web gem install rails docker compose run --rm web rails new . -d mysql -j esbuild --css=tailwind ``` config/database.ymlのhostをdbにpasswordにpasswordを設定(compose.ymlの内容に合わせます) ```yml default: &default adapter: mysql2 encoding: utf8mb4 pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %> username: root password: password host: db ``` Procfile.devのwebに` -b 0.0.0.0 -p 3000`をつける ``` web: env RUBY_DEBUG_OPEN=true bin/rails server -b 0.0.0.0 -p 3000 js: yarn build --watch css: yarn build:css --watch ``` ``` docker compose up ``` `http://localhost:3000` ## 検証のために簡単なページを作成する ``` docker compose exec web bin/rails g scaffold tasks name:string --skip-jbuilder --skip-helper --skip-test-framework docker compose exec web bin/rails db:migrate ``` http://localhost:3000/tasks ## DaisyUIの導入 ``` docker compose exec web yarn add daisyui@latest ``` tailwind.config.jsにdaisyui用の設定を追加 ``` module.exports = { content: [ './app/views/**/*.html.erb', './app/helpers/**/*.rb', './app/assets/stylesheets/**/*.css', './app/javascript/**/*.js' ], plugins: [require("daisyui")], } ``` app/views/layouts/application.html.erbのbodyにdaisyuiのclassを追加(デザインが当たっているかの検証です) ``` <body class="bg-orange-600"> <%= yield %> </body> ``` デザインが当たっているか確認する http://localhost:3000/tasks ## デプロイ ### Heroku 無料枠なし・最低5ドル/月(PostgreSQLを使う場合+5ドル/月、MySQLはjawsdb:kitefin使えば無料) ### Fly.io 無料枠なし・最低5ドル/月 ### Render.com 90日間無料(ストレージに0.25/1GBかかる可能性あり)・期間終了後はDBが課金(月7ドル)しないと使えなくなる ### デプロイ時に覚えておいて欲しいアドバイス Dockerで環境構築したからって本番環境でもDocker環境を使うようにデプロイする必要はない ### Herokuでデプロイしてみます Herokuでのアカウント作成やクレジットカードの登録は済ませている前提です Heroku CLIの準備も必要です https://devcenter.heroku.com/ja/articles/heroku-cli ``` heroku create git push heroku main heroku addons:create jawsdb:kitefin heroku config:get JAWSDB_URL ``` ``` heroku config:get JAWSDB_URL > mysql://DB_USERNAME:DB_PASSWORD@DB_HOST:3306/DATABASE_NAME # 詳細は個人情報のため記載をしませんが、上記の順でURLを確認することができます ``` ``` heroku config:set DATABASE_URL=JAWSDB_URLを入力してください ``` ※RailsアプリはDBのadapterはmysql2なので、変更が必要（mysql: ⇛ mysql2:） ``` heroku run rake db:migrate heroku open ``` rootを設定していなかったら`/tasks`とかにアクセスしてみましょう #### 参考記事 https://elements.heroku.com/addons/jawsdb https://qiita.com/shizimi_50/items/3f0ca56649dc8f968267
Last changed by  
 
なかいひびき
837

Read more

初めてのコードレビュー

※この記事はCoreviewを使う方に向けた個人開発者同士でコードレビューをするときの観点を解説する記事です。すべてのコードレビューに当てはまるものではありません。 コードレビューって何？ プルリクエストを使って自分が疑問に思った箇所について担当者に聞いたりより良い書き方や設計を話し合ったりするものです。 コードレビューの目的 コードレビューは本来チームで開発する際に、そのプロダクトをそのブランチを担当した人だけではなくチームメンバーみんなと共通の認識を持って全員がメンテナンスが出来る状態を作ったり、バグが混ざらないようにチェックしたり、より良い設計になるように議論することコードの品質を担保することを目的として行うものです(チームによって目的は変わります)。 個人開発者同士、特に初学者同士でレビューを行う場合はそのコードが他の環境でもきちんと動作するか確認したり、他の人が触っても意図がわかるようなUI・UXになっているかを確認し合うことでお互いに良いものを作れるようにサポートし合うことが目的となります。

4/6/2024
初めてのレビュー依頼

コードレビューって何？ プルリクエストを使って相手に自分のコードを確認してもらって共通認識を作ったり、よりよいコードを書くために行うものです。 コードレビューの目的 コードレビューは本来チームで開発する際に、自分が書いたコードを取り込んでもらうためにコードをチェックしてもらってバグがないか、コードや仕様がプロダクトの意図に合っているかを確認してもらうものです。 個人開発者同士でレビューを行う場合は自分のコードが他の人の環境でもきちんと動作するかを確認してもらったり、サービスに自分の視点だけではなく他人の視点を取り入れることで他の人に実際に使ってもらう際のギャップを事前になくしよりよいサービスにするために行います。 プルリクエストの作成時のポイント なるべく小さめのプルリクエストにする

4/6/2024
form_withについて完全に理解するイベント

https://railsguides.jp/form_helpers.html#フォーム要素を生成するヘルパー

1/29/2024
Bootstrapについて知ろうイベント

なんかよくわからんけどそれっぽいクラス書いたら勝手にCSS当たるでお馴染みのBootstrapについてちょっと知ってみる

11/19/2023
Read more from なかいひびき
Published on HackMD