Windowsで自分のプロダクトをリリースしよう！

１．Gitを利用できるようにしよう

環境構築でGitをインストールしたことは覚えていますか？これはリリースする際に必要で、バージョン管理を手助けしてくれるツールです。

このGitを利用するためにユーザー名とemailを登録する必要があります。以下のコマンドの"名前"と"メールアドレス"の部分を変更して、実行してください！

git config --global user.name "名前"

git config --global user.email "メールアドレス"

２．herokuを使えるようにしよう

『heroku（ヘロク）』は、自分のサービスを、みんなが見れるように置いておくサーバーですね！それを使えるようにしましょう！！

herokuCLIをインストールします！

『heroku CLI（ヘロク・シーエルアイ）』をインストールすることによって、PCからデプロイしたりサーバーの設定を変更したりすることができるようになります。

ツールはこちらからインストールしておきましょう。
heroku CLI インストール画面

インストールが出来たら、コマンドプロンプトを再起動して、以下のコマンドを打ってみてください。

heroku --version

インストールしたバージョンが出てきたらインストールは完了しています。
これでherokuを使う準備はばっちりです！

３．自分のプロダクトに、リリースするための準備をしよう

これからherokuにデプロイする準備をします。

cd desktop
cd (自分のサイトのフォルダ名)

で自分のプロジェクトフォルダに移動しましょう。

Gemfileの編集

Gemfileをherokuサーバー上で動くように編集していきます。

まず、gem 'sqlite3', '~> 1.4'」と書いてある行(9行目付近にあります)をコメントアウトしましょう。(これらは、自分のパソコンの中のrails app内で用いるデータベースのgemです。)　

変更前

変更後

次に、Gemfileの31行目付近にあるgroup :development, :test do ～ endの間に
gem 'sqlite3'を追加してください。

変更前

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]
end

変更後

group :development, :test do
  gem 'sqlite3' # 開発環境ではsqlite3を利用
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

最後に以下の記述をそのままGemfileの最後の行に追加してください。

group :production do
  gem 'pg'
end

Railsではsqliteというデータベースが利用されるようになっています。
しかし、herokuではPostgreSQLというデーターベースを利用するので設定を変更する必要があるのです。

ただ、PostgreSQLを利用するのは本番環境のみなので、group:productionというオプションを追加して本番環境のみで使うようにしています。

Gemfileを書きかえて保存したら、自分のアプリの階層で、下記のコマンドによりGemfileの変更を反映させましょう!!

bundle install --without production

database.ymlの編集

herokuでPostgreSQLを使うためには、もう一箇所データベースの設定を変更する必要があります。

config/database.ymlファイルの中身を書き換えます。

以下のように本番環境を表しているproductionの項目を変更しましょう。
ymlファイルはインデント（字下げ）を必ず半角スペース2つで行い、全角の空白は使わないように注意してください。
半角と全角は見分けることが難しいので、間違って打ってしまうと探すのに一苦労します...^ ^

変更前

production:
  <<: *default
  database: db/development.sqlite3

変更後

production:
  <<: *default
  adapter: postgresql
  encoding: unicode
  pool: 5

production環境下でのデータベースがsqliteからpostgresqlに変わってるのがわかると思います。
.ymlの拡張子を持ったファイルはYAMLというデータを構造的に記述していく特殊なファイルです。
インデントが文法の意味を持っていますので、注意してください。

トップページ(ルーティング)の設定

本番環境では、トップページ(root)を一つ設定する必要があります。

すでにrootを一つ記述している方はそのままで大丈夫です。2つ以上rootを定義してしまうとエラーが発生します。

もし、rootページを記述していなければ、config/routes.rbに追記してください。

(例)

root 'tweets#index' # 追記(indexページをトップページにする場合)

一般化するとroot 'コントローラー名#アクション名'という記述になります。自分のトップページを入力してくださいね！

config/environments/production.rbの設定

これが最後の編集です。

動的な画像を表示させるために、以下の記述をfalseからtrueに変えてください。
31行目あたりにあると思います。

config.assets.compile = true

３．いざリリースへ！！

ここで、先ほどインストールしたgitを使っていきます。

デプロイしたいrailsアプリ内にgitの設定ファイルを作成したいので、必ずrailsアプリケーションの階層にいることを確認してから(ふだんrails sするところ)、以下のコマンドを入力してください。

git init

４．herokuにログインしよう

「heroku CLI」をインストールしたので、コマンドプロンプトからherokuを操作することができます。

まずはherokuにログインします

以下のコマンドを入力してください

heroku login

herokuに登録したemailとpasswordの入力を要求されたら、入力しましょう。

写真のようになれば成功です。

次に、heroku上にRailsアプリケーション用のサーバーを作成します。

アプリの名前はurlになるものです。半角英字なのはもちろんですが、使えない記号(_など)もあるので、シンプルなものにしておきましょう。
ちなみにアプリの名前を空欄にすると自動生成してくれます。

heroku create 好きなアプリの名前

次に、herokuでrubyとnode.jsを使えるように設定します。

herokuのダッシュボードに行き、

Settingsをクリック

Add Buildpackを押し、nodejs(※使ってる人のみ)とrubyを追加します。
以下の写真のようになれば成功です。

※Buildpacks内は必ず、上からheroku/node.js、heroku/rubyになるように注意してください。
アプリ内にpackage.jsonがない人はrubyのみで大丈夫です。

これでアプリを作ることができます。
既に名前が使われているものは作成できないので注意してください。

作成できたらherokuの公式サイトにログインして、サーバーが作成されているか確認しておくといいでしょう。

５. 公開してみよう！

準備が整ったので、いよいよ実際にデプロイします！まずはgitにファイルを登録し、そのあとにherokuに登録します。

必ずrailsアプリケーションのディレクトリーにいることを確認してから(ふだんrails sするところ)、以下のコマンドを打ってください。

コマンドプロンプトンに以下を順番に入力しましょう。

git remote
git add -A
git commit -m "Release to heroku"

ここで初めてgitを使ってコミットした人は、githubに登録したemailとusernameの入力を求められる場合があるので、入力してあげましょう。

下記のコマンドでデプロイできます。(※まだ終わりじゃありませんよ！！)

git push heroku master

Heroku上で画像投稿機能(cloudinary)を登録しよう

画像投稿機能を実装している場合は更に追加で以下のコマンドを実行してください。
（Cloudinaryの認証が済んでいない人は、画像投稿ができないので、このタイミングで済ませておきましょう。認証したかどうか思い出せない人はメンターに相談してみましょう。）

(xxxxxxxxxxのところはCloudinaryのマイページで取得した自分のキーに書き換えておいてください)

heroku config:set CLOUD_NAME=xxxxxxxxxx
heroku config:set CLOUDINARY_API_KEY=xxxxxxxxxx
heroku config:set CLOUDINARY_API_SECRET=xxxxxxxxxx

また、他のAPIキーを.envファイルに記述している場合も、上記と同様の作業にheroku上で値を登録しましょう！

データベースの作成！

手順１：

herokuのダッシュボードに行き、Resources→find more add -onsを押します。

手順２：

アイコンの中から、Heroku Postgresを選択します。

手順３：

Plans & Pricingから、使いたいデータベースを選択

手順４：

右上のInstall Heroku Postgresを押します

手順５：

App to provision to に先ほど作成したアプリ名を入力します。

手順５：

Submit Order Formを押します

以上でデータベース作成は終了です。

heroku上でマイグレーションしましょう！

続けて、今回はデータベースを使ったアプリケーションを公開するので「migrate」で本番環境のデータベースを更新します。(migrationファイルを基に本番環境のデータベースが構築されます)

heroku run rails db:migrate

上記コマンドにより、色付きでデータベース構築ログが出力されるはずです。

本番環境のherokuを操作する場合は、コマンドがRailsと違いHerokuなので間違えないように注意しましょう。

また、seedファイルに初期レコードを定義している場合(聞き覚えのない方はここを飛ばして大丈夫です)は、以下を実行します。

heroku run rails db:seed

これで公開は完成です！！

実際にアプリケーションにアクセスしてみましょう！

コマンドプロンプトから以下のコマンドでアプリケーションを開くことができます。

heroku open 

ここまでお疲れ様でした！！これでHerokuのデプロイは終了です。

６．再デプロイ

一度公開すると色々な人からフィードバックなどをもらって、修正したくなることが必ずあると思います。（むしろ、アップデートすることがサービス作りの面白さを実感する部分かもしれません）それでは修正を行ってみましょう。

Vscodeを変更して、、、保存、、

これだけではローカル（localhost3000）では変更されますが、http://~の方には変更が加えられません。その為、再デプロイという作業を行っていきたいと思います。

修正してみよう！

とっても簡単で、回数制限もないので気軽にやっていきましょう。
railsアプリケーションのフォルダ―上で

git add -A
git commit -m "○○.index.erbを修正" #変更内容のメッセージを付けましょう。
git push heroku master
heroku open

これで完了です。

以上で、再デプロイは終了です！　お疲れ様でした！
できたらぜひメンターに見せてくださいね。

最後に

webコースデプロイまで頑張ってくれてありがとう！
自分のアプリを作ったことを今後の自信につなげてください！デザインが残っている人はデザインも頑張ってください！