24
33

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 5 years have passed since last update.

Ruby on Rails完全初心者がとりあえずアプリをデプロイするまで

Last updated at Posted at 2018-08-16

#1. 何するの?
Ruby on Railsというフレームワークを使って簡単なWebアプリを作り、それをネット上で一般に公開(デプロイ)します。コーディングは一切不要です。
何番煎じだ、という内容ですが自分でやったことのまとめとして残しておきます。
ちなみに作ったのはこういうものです。コメントの書き込み・編集・消去ができます。↓
https://myblog-test-o2.herokuapp.com/posts
#2. Web開発初心者の3大障壁
自分はWeb開発は全くの初心者なのですが、ちょっとかじって見た中で大変だなと思ったのが以下の3点。

  • 環境構築でつまずく!
  • サーバーとかデータベースとか謎!
  • ローカルで実行できたけど、デプロイってどうやんの??

特にデプロイはかなり謎でした・・・(最初は意味すらわからなかった)
で、どうやって乗り越えたかというと
環境設定・サーバーなど→AWS Cloud9で楽々!
デプロイ→HerokuとGithubで楽々!
でした。
#3. 利用するサービス
いずれもユーザー登録をお願いします。今回のような範囲で使う分にはどれも無料です。
・Github
https://github.com/
・AWS Cloud9
https://aws.amazon.com/jp/cloud9/
・Heroku
https://jp.heroku.com/
#4. 早速やってみよう

Cloud9にRailsをインストール

まずはCloud9にアクセスします。
Create a new workspaceで新しいワークスペースを作りましょう。
Workspace nameとDescriptionは適当にお願いします。
4ad6ec44832123dbfe6de2d516d21ef7.png
テンプレートとしてBlankを選んでCreate workspaceしましょう。
ページ下部にコマンドラインが現れたと思います。まずは

$ sudo gem install rails

でRuby on Railsをインストールしましょう。しばらくして「Successfully installed rails-X.X.X」となったら完了です。

####早速アプリを作ってみよう!

$ rails new memoapp

とすると、memoappという名前のフォルダができ、アプリが生成されます。

$ cd memoapp
$ rails g scaffold post user:string content:text
$ rails db:migrate
$ rails assets:precompile

とすると、scaffoldという機能を利用して、メモアプリが自動生成されます。ここで

$ rails s -b $IP -p $PORT

として、画面上部のPreview→Preview Running Applicationとして
https://newapp-[ユーザー名].c9users.io/posts
にアクセスすると、アプリが動いていることが確認できます。New Postからメモを残せます。
2d15d6676c5a51211c9103d45fff869b.png
ただこれはまだローカルで実行しているだけなのでデプロイはされていません。
一度control+Cでアプリを落としておきましょう。

Herokuを使う準備

ここからGithubとHerokuを使ってデプロイしていきます。
まずHerokuではsqlite3が使えないので、Gemfileを編集します。
newapp/memoappにあるGemfileを以下のように編集してください。

gem 'sqlite3'

となっているのを

gem 'sqlite3', group: :development
gem 'pg', group: :production

に変更。
そのあと、コマンドラインで

$ bundle

を実行してください。次にnewapp/memoapp/config/database.ymlを編集します。

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

の部分を

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

に変更してください。ymlファイルのインデントは必ず半角スペース2個です!

Githubと連携しよう

まずコマンドライで以下を実行します。

$ git init
$ git add -A
$ git commit -m "first commit"

次に
https://github.com/
に移動しましょう。+マークからNew Repositoryを選んで・・・
3f3935357ad04fc06132b9236f1df24f.png
repository nameをmemoappとして、Create Repositoryします。
3b29d7769bcd10d20b8041cae67ac6d6.png
この部分を後で使います。

####SSH接続しよう
Cloud9のコマンドラインに戻ります。

$ cat ~/.ssh/id_rsa.pub

とすると、ssh-rsaで始まるなにやらすごく長いものが出てきます。これがGithubに接続するのに必要な鍵となります。(他の人には教えないように!)

またGithubの方でSettingsに移動します。
7a35e8d0d605068fad5f6e847a0e8cfd.png
SSH and GPG keysを選びます。
c5d27506c9e53ae7ea114c1204734dde.png
緑色の「SSH Keys」をクリックして、タイトルをcloud9とし、先ほどの公開鍵をコピペして、Add SSH Keyします。
fedf339fb7f7120baee5ecb0525b1a70.png

Githubのmemoappレポジトリから先ほどのアレをコピーします。
3b29d7769bcd10d20b8041cae67ac6d6.png
cloud9のコマンドラインから

$ git push コピペしたやつ master

で、Githubとの連携は完了です!

####Herokuでデプロイする

$ heroku create サーバーの名前

として今回のアプリ用のサーバーを立てます。サーバー名は自由につけられますが、他の人と被ってはいけないので、memoapp-[名前]-[日付]などとして重複を避けてください。
あとはコマンドラインで

$ git push heroku master
$ heroku run rails db:migrate

とします。

次にhttps://dashboard.heroku.com/
にログインして先ほど作ったサーバー名(memoapp-[名前]-[日付]とか)をクリック。
DeployのタブからDeployment MethodをGithubに。
App connected to GitHubからGithubへの連携をオンにし、
Automatic deploysをオン(enabled)にします。
最後にDeploy Branchをして、Viewでアプリの稼働を確認します。
5fb93cb78a24a86ba2fc97d6518c999f.png

どうだったでしょうか?無料のサービスだけで、自分のアプリケショーンをWebに公開することができました。これをきっかけに、どんどん機能を充実させて自分だけのアプリを作ってみてはいかがでしょうか?

#5. 参考にさせていただいたもの
https://www.sejuku.net/blog/8178
https://rails-study.net/github/
https://qiita.com/seltzer/items/d52a31c558a30c857a3f
https://railstutorial.jp/

24
33
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
24
33

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?