Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

railsその0003-004 Herokuにデプロイして第一章完了

参考にさせて頂いたページ

第1章 ゼロからデプロイまで | Rails チュートリアル

Herokuにデプロイした記事

はじめに

rails 5のチュートリアルをやってみる日記です。

今日はここまで読んだとか、ここまでやったとかそんな感じの日記です。

今日の日記

railsアプリケーションをpushするにあたって、production環境でpgが有効になるようにGemfileとGemfile.lockを編集する必要がありました。

ハマったりしましたが、新たにheroku createし直したり、Herokuのログを確認する方法を調べたりして解決できました。

rails tutorialの第一章が完了しました。

localの開発環境構築と公開されているサーバへのデプロイができたので、ハマりがちな環境構築を切り抜けて一安心です。

Herokuその0002 Windows10でHerokuにrails アプリケーションをデプロイする

前回の記事

参考にさせて頂いたページ

sqlのgemについて

Herokuのログ確認方法について

今日の環境

  • Windows10 Home
  • Heroku CLI 6.14.36

production環境ではpgを使うようにGemfile.lockを変更する

sqlite3をdevelopment環境で使用しており、herokuではpostgresqlを使う必要があるようなのでGemfileを以下のように編集しました。
他にも使い分けたいgemがあれば記述します。

sqlite3をdevelopmentとtestで使用する設定にします。

group :development, :test do
  gem 'sqlite3', '1.3.13'
end

production環境ではpgを使用する設定にします。
pgはpostgresqlらしいです。

group :production do
  gem 'pg', '0.20.0'
end

Gemfileを変更したらbundleインストールしますが、localhostの開発環境で以下のコマンドを実行しておきます。

bundle install --without production

Gemfile.lockが更新されます。

Herokuにデプロイする

以下のコマンドでデプロイしました。

git push heroku master

前回の記事と比べるとrailsアプリケーションは時間がかかっています。

デプロイは成功したようですが、ページは上手く表示されず以下のように表示されてしまいました。

We're sorry, but something went wrong.

If you are the application owner check the logs for more information.

Herokuサーバーのログを見る

pushしたコマンドプロンプトから、以下のコマンドを実行するとログが確認できます。

heroku logs -t

または、webブラウザでHerokuにログインして、アプリケーションを選択して、右上の「More」をクリックすると、「View logs」というリンクがあるのでクリックするとログが見えます。

f:id:motomichi_works:20171028021030p:plain

私の場合はSQLのSELECTを実行するところで「テーブルが無い」というエラーが出ていました。

consoleでmigrateを実行する

さきほどの「More」をクリックすると、「Run console」というリンクがあるのでクリックするとサーバー上でコマンドが実行できます。

f:id:motomichi_works:20171028021833p:plain

rails5なので、bashプレースホルダーがあるフィールドに、以下のように入力しました。

rails db:migrate

テーブルが作成されて、ページが正常に表示されるようになりました。

Herokuその0001 Windows10でHerokuにデプロイするまで

参考にさせて頂いたページ

今日の環境

  • Windows10 Home
  • Heroku CLI 6.14.36

アカウント作成

アカウント作成はすぐできました。

参考にさせて頂いたページはスクリーンショットも付いて解りやすいですね。

クライアントツールをダウンロード

Heroku CLI | Heroku Dev Center」から、heroku-cli-x64.exeのダウンロードをしてインストールしました。

Heroku CLI 6.14.36 がインストールされました。

任意のディレクトリにgit cloneする

あらかじめbitbucketで作成しておいた空のリポジトリをcloneしました。

index.phpを作成してコミット

以下の通り作成してコミットしました。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>sample</title>
<meta charset="utf-8">
</head>
<body>
Hello World
</body>
</html>

Herokuにログインする

上記のcloneしたディレクトリにコマンドプロンプトで移動して、以下のコマンドを実行しました。

heroku login

以下のような表示でEmailとPasswordを入力したらログインできました。

Enter your Heroku credentials:
Email: 
Password: 
Logged in as <your mail address>

Herokuアプリケーションを作成する

以下のコマンドを実行しました。

heroku create

以下のような表示がされて、アプリケーションが作成されました。

Creating app... done, cryptic-stream-72356
https://cryptic-stream-72356.herokuapp.com/ | https://git.heroku.com/cryptic-stream-72356.git

デプロイする

上記した手順でindex.phpを作成しているわけですが、index.htmlを作成したらpushに失敗したからindex.phpにしているという経緯もあります。

以下のコマンドでHerokuのサーバにデプロイします。

git push heroku master

以下のように表示されました。

Counting objects: 6, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (5/5), done.
Writing objects: 100% (6/6), 985 bytes | 0 bytes/s, done.
Total 6 (delta 0), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> PHP app detected
remote:
remote:  !     WARNING: No 'composer.json' found.
remote:        Using 'index.php' to declare app type as PHP is considered legacy
remote:        functionality and may lead to unexpected behavior.
remote:
remote: -----> Bootstrapping...
remote: -----> Installing platform packages...
remote:        NOTICE: No runtime required in composer.lock; using PHP ^5.5.17
remote:        - apache (2.4.20)
remote:        - nginx (1.8.1)
remote:        - php (5.6.31)
remote: -----> Installing dependencies...
remote:        Composer version 1.5.2 2017-09-11 16:59:25
remote: -----> Preparing runtime environment...
remote:        NOTICE: No Procfile, using 'web: heroku-php-apache2'.
remote: -----> Checking for additional extensions to install...
remote: -----> Discovering process types
remote:        Procfile declares types -> web
remote:
remote: -----> Compressing...
remote:        Done: 13.7M
remote: -----> Launching...
remote:        Released v3
remote:        https://cryptic-stream-72356.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/cryptic-stream-72356.git
 * [new branch]      master -> master

ページを表示してみる

以下のURLにアクセスしたらデプロイしたページが表示されました。

https://cryptic-stream-72356.herokuapp.com/

アプリケーション名を変更する

他の人がまだ使用していない名前に変更できるようです。

以下のコマンドで変更します。

xxxxの部分は任意で名前を設定してください。

記号はハイフンだけが使用できるようです。

heroku rename xxxx

https://xxxx.herokuapp.com/

でページが表示できるようになります。

Herokuからログアウトする

以下のコマンドでログアウトします。

heroku logout

gitのoriginとherokuを確認しておく

以下のコマンドを実行しました。

git config --list

railsその0003-003 任意のactionを作成してroutingの設定をする

参考にさせて頂いたページ

はじめに

rails 5のチュートリアルをやってみる日記です。

今日はここまで読んだとか、ここまでやったとかそんな感じの日記です。

今日の日記

編集対象ファイルは config/routes.rb でした。

詳細は「Rails のルーティング | Rails ガイド

railsその0003-002 任意のgemをproduction環境、development環境、test環境それぞれ分けてインストールする

参考にさせて頂いたページ

はじめに

rails 5のチュートリアルをやってみる日記です。

今日はここまで読んだとか、ここまでやったとかそんな感じの日記です。

任意のgemをproduction環境、development環境、test環境それぞれ分けてインストールする

Herokuにデプロイするところで、sqlite3をgroupに加えていました。

以下は引用コードです。

引用元:「第1章 ゼロからデプロイまで | Rails チュートリアル

group :production do
  gem 'pg', '0.20.0'
end

group :development, :test do
  gem 'sqlite3', '1.3.13'
  gem 'byebug',  '9.0.0', platform: :mri
end

などgroupに分けて記述して、以下のようにproduction環境でbundle installします。

$ bundle install --without production

railsその0003-001 RailsTutorialを始めてみる

はじめに

技術ブログというか日記です。

最近は全然勉強していなかったり、
勉強していたとしても記録を残していないので、なんか前に進んでる感が無くて、
成長していない自分にただただ焦りを感じているので、
久しぶりにコツコツ前に進んでる感を自分で感じとれるように書き留めていこうと思ってます。

コツコツ勉強した記録をあとで眺めるとなんかちょっと元気が出ます。

Electronその0001 HelloWorldまでやってみる

参考にさせて頂いたページ

環境

  • Windows10
  • node 6.11.4
  • npm 5.5.1
  • electron 1.7.9

プロジェクトのディレクトリを作成する

何でも良いけど、el_image_viewerディレクトリを作成しました。

そのディレクトリでnpm initして、適当にenter押しました。

npm init

Electronをプロジェクトディレクトリにインストールする

公式のnpmパッケージのページにならって以下の通りです。

npm install electron --save-dev --save-exact

main.jsの作成とその記述内容

【2017年1月版】今からでも遅くない!Electron入門 - Qiita」にならって以下の通り記述しました。

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow = null;
app.on('ready', () => {
  // mainWindowを作成(windowの大きさや、Kioskモードにするかどうかなどもここで定義できる)
  mainWindow = new BrowserWindow({width: 400, height: 300});
  // Electronに表示するhtmlを絶対パスで指定(相対パスだと動かない)
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // ChromiumのDevツールを開く
  mainWindow.webContents.openDevTools();

  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

index.htmlの作成とその記述内容

【2017年1月版】今からでも遅くない!Electron入門 - Qiita」にならって以下の通り記述しました。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    Hello World!
  </body>
</html>

electronコマンドでmain.jsを実行してみる

el_image_viewerディレクトリで以下のコマンドを実行しました。

./node_modules/.bin/electron ./main.js

Hello World! と表示されました。

今日はここまで。