Rails newからデプロイまで

## はじめに
はじめまして！2024/04/11よりRUNTEQというプログラミングスクールに在学中のみうらと申します。
`Ruby on Rails` を学習中です。
今回は`Docker` を使った`Rails`の環境構築からデプロイまでの一連の流れについて記していきたいと思います。(2024/06/30時点)
## 今回の流れ
- Rails new
- Git hubのリポジトリ作成
- デプロイ

上記の3点についてまとめていきたいと思います。

## 今回使用技術
- ruby:3.2.3
- Rails: 7系統 (7.1.3.4)
- PostgreSQL
- Docker 
- Git Hub
- Render

## Rails環境構築

[こちら](https://hackmd.io/@SKjw2RY-RNCUNSdJfEWPig/HJE0GUClC)を参考に環境構築。
その際、`PostgreSQL`を選択。`Bootstrap`と`Tailwind`お好きな方を使ってください。
また`docker compose up`の際にエラーが起きた場合[こちら](https://qiita.com/miura-taiga/items/3342ac7d7aa24edebcd4)を参考にすると解決できるかもしれません。この時点でhttp://localhost:3000 にアクセスし、以下の画像のようになっていたら成功。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825274/7852a957-8399-0747-40ac-ed4439fb883c.png)


以下確認用の作業のため割愛しても構いません。
<details><summary>トップページ作成</summary>
1. rails g ... コマンドの設定を加える

```:config/application.rb
module Myapp
  class Application < Rails::Application
  ~~~~~省略
    config.generators do |g|
      g.skip_routes true
      g.helper false
      g.test_framework nil
    end
  end
end
```
上記は余計なファイルを生成しないために行っています。


2.コントローラの作成
```:ターミナル(コンテナ内)
rails g controller StaticPages top
```
3.ルートの設定
```:config/routes.rb
root 'static_pages#top'
```
4.ビューの編集
app/views/static_pages/top.html.erbを必要に応じて編集してください。

</details>

## Git Hubの連携
#### リポジトリ作成
[Git Hub](https://github.com/)にリポジトリを作成します。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825274/e391ee0b-2955-6fc6-fe40-bd8b524e41f7.png)


作成できたらリモートリポジトリの追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825274/09b0d572-a7fe-8a11-0ab8-f10af95c339a.png)
上記の画像のように遷移すると思いますので、適した方を選択してください。
1. 新しいリポジトリを作成してからプッシュする方法 
1. 既存のリポジトリをプッシュする方法

今回は1を採用。上から順にターミナルでコマンド実行。

実行後ページをリロードし、コミットメッセージが反映されていれば成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825274/44130be0-8fc8-2503-5ecb-fdff35f14578.png)


## Renderへデプロイ
#### 1. デプロイを自動化する設定
下記コマンドでファイルを作成し、作成したファイルにコードを追加。
```:ターミナル
touch bin/render-build.sh
```
```:render-build.sh
set -o errexit

bundle install
bundle exec rake assets:precompile
bundle exec rake assets:clean
bundle exec rake db:migrate
```
上記作業は、Renderにアプリをデプロイするための手順を自動化するためのものです。
このタイミングでコミット&プッシュまでしましょう。
```:ターミナル
git add .
git commit -m "コミットメッセージ"
git push origin main
```
今回は作業ブランチを作成していないのでmainブランチをプッシュしています。
### 2. Renderの設定

### Web Serviceの設定
[Render](https://render.com/)にアクセスします。ユーザー登録をされてない方はGit Hub
アカウントでログインしてください。
`Web Service`を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825274/496d4829-11a4-115d-17e3-aef7cdb18c00.png)

先ほど作成したリポジトリを選択し`Connect`をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825274/c7f0651e-2a85-d188-9996-80ae26b61a98.png)

必要な情報を設定していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825274/a0bfb443-052e-16a4-abea-2bc22a804a3c.png)


**Language** : `Ruby`
**Region** : `Singapore (Southeast Asia)`
**Build Command** : `./bin/render-build.sh`
**Start Command** : `bundle exec puma -t 5:5 -p ${PORT:-3000} -e ${RACK_ENV:-development}`

必要事項を入力。その他設定はお好みで設定してください。

環境変数の追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825274/8162edc9-09d6-f724-cfd3-1ce1c00db052.png)
プレースホルダーが`value`の部分に`config/master.key`のコードを貼り付け。
最後に**Deploy Web Service**をクリックして作成。

この時点で以下のようになっていても気にしなくて大丈夫です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825274/f418d3be-79fb-8d78-a508-c30890a33cab.png)


### PostgreSQLの設定

`PostgreSQL`を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825274/9dbe6b7a-b4bd-865e-11d0-3d01b9eb114d.png)
次に各項目入力。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825274/430fa8e3-01aa-5392-7d8c-6dec95316eb9.png)
以下例。

**Name** : Test_db
**Database** : test_db (後から変更できません)
**User** : miura-taiga (後から変更できません)
**Region** : `Singapore (Southeast Asia)`

入力し終えたら**Create Database**をクリックして作成。

### データベースの連携
[Dashboard](https://dashboard.render.com/)に戻り先ほど作成した**PostgreSQL**の方を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825274/42a56b7c-7e63-17ba-2dc4-bfc6a6e3f0de.png)

**Internal Database URL**をコピー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825274/db71c5e2-0d60-6b73-f18d-663cc5132339.png)

[Dashboard](https://dashboard.render.com/)に戻り先ほど作成した**Web Service**の方を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825274/bbecddf9-90ac-c508-6614-8cc3a25600b4.png)

サイドバーの**Environment**を選択し、**Add Environment Variable**をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825274/ee271c3d-5577-25b4-dedf-1e31080e0a17.png)

**Key**に `DATABASE_URL` 
**Value**に先ほどコピーした「Internal Database URL」の値をペースト。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825274/819c741f-71e6-a6af-b28a-170b381ced4c.png)
入力し終えたら **Save Canges**をクリックし保存。

これで一通りの作業が終了です。できているか確認していきましょう。

**Live**に変わったら左上のURLにアクセスしてみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825274/25432c94-1088-2918-a1a4-8a65e053ebdd.png)

`top.html.erb`の内容が表示されていれば成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825274/e57508f0-f9b0-83a0-ed7c-28ce5e4864b2.png)


## おわりに
今回はRails newからRenderを用いてデプロイまでの流れを備忘録として記しました。
初心者ゆえ至らない箇所あるかと思いますが、ご理解のほどよろしくお願いします。
注意点として現在(2024/06/30時点)での手順となりますので以降作業手順が変わってくるかもしれませんので参考程度にご鑑賞ください。
今後も学習のアウトプットの一環として記していきたいと思います。