無事環境構築できたものを自分用に備忘録として残しておく（適宜修正予定）
プラスでよく使うものも込みでまとめておく。
・Bootstrap導入
・Git / Heroku へPush
ファイル用意
ディレクトリを作成し、その中に以下のファイルを用意
Dockerfile
docker-compose.yml
Gemfile
Gemfile.lock
entrypoint.sh
これより以下のファイル内のmyappは自分が作成したディレクトリ名に置き換える
FROM ruby:2.7.1
RUN curl -sS 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 nodejs yarn
RUN mkdir /myapp
WORKDIR /myapp
COPY Gemfile /myapp/Gemfile
COPY Gemfile.lock /myapp/Gemfile.lock
RUN bundle install
COPY . /myapp
# Add a script to be executed every time the container starts.
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000
# Start the main process.
CMD ["rails", "server", "-b", "0.0.0.0"]
Rails5との変更点は、webpacker導入によるyarnとnodeのインストール
credentials:editを使う予定の場合は、build時点で設定すると良さそう。
RUN apt-get install -y vim
source 'https://rubygems.org'
gem 'rails', '6.0.3'
# 空のままで
#!/bin/bash
set -e
# Remove a potentially pre-existing server.pid for Rails.
rm -f /myapp/tmp/pids/server.pid
# Then exec the container's main process (what's set as CMD in the Dockerfile).
exec "$@"
version: '3'
services:
db:
image: mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: password
ports:
- '3306:3306'
command: --default-authentication-plugin=mysql_native_password
volumes:
- mysql-data:/var/lib/mysql
web:
build: .
command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
volumes:
- .:/myapp
ports:
- "3000:3000"
depends_on:
- db
stdin_open: true
tty: true
volumes:
mysql-data:
driver: local
アプリ作成
このコマンドで最後webpackerがインストールされて完了
docker-compose run web rails new . --force --no-deps --database=mysql
Rspecを使用する予定の場合は、--skip-test
アプリ生成したら、buildする。最後Successfully ~~と出る
docker-compose build
DB作成
config/database.ymlを以下のように変更
また、ここまでの時点でmyappが適切に書き変わっているため、config/database.ymlでは修正する必要は無し。
default: &default
adapter: mysql2
encoding: utf8mb4
pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
username: <%= ENV.fetch("MYSQL_USERNAME", "root") %>
password: <%= ENV.fetch("MYSQL_PASSWORD", "password") %>
host: <%= ENV.fetch("MYSQL_HOST", "db") %>
development:
<<: *default
database: myapp_development
test:
<<: *default
database: myapp_test
production:
<<: *default
database: myapp_production
username: myapp
password: <%= ENV['MYAPP_DATABASE_PASSWORD'] %>
DBを作成する
docker-compose run web rake db:create
docker-compose run web rake db:migrate
Dockerを起動する
docker-compose up
http://localhost:3000 にアクセスし、お馴染みのページが表示されれば無事成功。
Bootstrap導入
必要なものをインストール（バージョンは指定しなくても。）
yarn add bootstrap@4.4.1 jquery@3.5.1 popper.js@1.16.1
config/webpack/environment.jsに追記
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
}))
module.exports = environment
app/javascript/packs/application.jsに追記
require("bootstrap/dist/js/bootstrap")
application.cssの拡張子cssをscssに変更
最後にapp/assets/stylesheets/application.scssに追記
/*
*= require_tree .
*= require_self
*/
@import "bootstrap/scss/bootstrap";
bootstrap jquery popper.jsをインストールしてから上記の記述だと、Herokuにデプロイした際にも適用された。
しかし以下のやり方だと、Herokuで適用されなかった。一応残しておく
インストールしたファイルをwebpackerの管理下に加える
~省略~
import "bootstrap"
import "bootstrap/scss/bootstrap.scss"
正常に適用されているか確認するために、トップページを用意する。
rails g controller welcome index
ルーティングを設定
Rails.application.routes.draw do
root "welcome#index"
end
viewを記述
~省略~
<body>
<header class="navbar navbar-expand-sm navbar-light bg-light">
<div class="container">
<%= link_to "サービス名", root_path, class: "navbar-brand" %>
</div>
</header>
<div class="container">
<%= yield %>
</div>
</body>
</html>
適切に記述出来ていれば、bootstrapが適用される。
GitへPush
GitHubに登録している名前とメールアドレスを設定
git config --global user.name "自分の名前"
git config --global user.email "自分のメアド"
パスワード保持の時間設定（1日）
git config --global credential.helper "cache --timeout=86400"
Gitリポジトリ初期化
git init
git add -A
git commit -m "コミットメッセージ"
GitHubページで新規リポジトリ作成
そしてPushする
git remote add origin https://github.com/GitHubアカウント名/プロジェクト名.git
git push -u origin master
HerokuへPush（失敗談込み）
Herokuをインストールする。しかしここで問題発生。以前までCloud9で開発していたので、下のコマンドでインストールしていた。
source <(curl -sL https://cdn.learnenough.com/heroku_install)
そして上のコマンドを実行し、versionを確認すると、下のようになり上手くいかず。
heroku -v
/usr/local/heroku/bin/heroku: line 44: /usr/local/heroku/bin/node: cannot execute binary file
最終的には下記のように行いインストールに成功
まず、アンインストール
rm -rf /usr/local/heroku /usr/local/lib/heroku /usr/local/bin/heroku ~/.local/share/heroku ~/Library/Caches/heroku
次に以下のコマンドでインストール
brew tap heroku/brew && brew install heroku
そしてもう一度versionを確認
heroku -v
heroku/7.51.0 darwin-x64 node-v12.21.0
気をとりなおして、Herokuにログインする。
heroku login --interactive
アプリケーション作成
heroku create
Herokuにデプロイする
git push heroku master
アプリケーション名変更
heroku rename アプリケーション名
参考にした記事
・https://qiita.com/me-654393/items/ac6f61f3eee66380ecd7
・https://qiita.com/nsy_13/items/9fbc929f173984c30b5d
・https://qiita.com/shingokubota/items/3562bf4996468899613c
・https://qiita.com/take18k_tech/items/a36d77316e32a6696205