#はじめに
基本的なコマンドやプログラミング、Dockerの基礎知識がある前提で進めますので、
中級者さん向けの記事かと思います。
ちなみに私は現時点でRailsとDockerは環境構築したことはありますが、
Vue.jsは未経験です。
Reactならgemがあるのでそれを組み込むだけでいいみたいなのですが、
学習コストがかかるようなので、vueでフロントエンドを実装したいと思います。
私の環境
% sw_vers
ProductName: Mac OS X
ProductVersion: 10.15.7
BuildVersion: 19H524
#STEP1. まずは環境構築
//①プロジェクトファイルの新規作成&そのファイルに移動
% mkdir project_vue && cd project_vue
//必要な4ファイルを新規作成
% touch Dockerfile docker-compose.yml Gemfile
Gemfile.lock
ここまでできたらvimでDockerfileを開いて以下をコピペ
(% vi DockerfileでDockerが開けます)
(Dockerfile=Docker imageを作るための設計書です)
(ほぼこちらのQiita記事からコピペさせていただきました。)
FROM ruby:2.5.3
RUN curl -sL https://deb.nodesource.com/setup_10.x | bash - && apt-get update && \
apt-get install -y nodejs --no-install-recommends && rm -rf /var/lib/apt/lists/*
RUN apt-get update -qq && apt-get install -y build-essential libpq-dev
RUN apt-get update && apt-get install -y curl apt-transport-https wget && \
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 && \
apt-get update && apt-get install -y yarn
RUN curl -sL https://deb.nodesource.com/setup_10.x | bash -
RUN apt-get install -y nodejs npm && npm install n -g && n 10.17.0
RUN yarn add node-sass
RUN mkdir /app
WORKDIR /app
COPY Gemfile /app/Gemfile
COPY Gemfile.lock /app/Gemfile.lock
RUN bundle install
COPY . /app
ーー補足
aptコマンドとは？： LinuxDebian系のパッケージ管理システム。dpkgをより簡単に管理するイメージ。Debian系のLinuxシステムにパッケージをインストールするか、削除するために使用される。
yarnとは？: jsのパッケージ管理ツールの1つ。npmのすごいバージョン。
curlコマンドとは？: 手軽に HTTPリクエストできるらしい(参考記事)
version: '3'
services:
web:
build: .
command: bundle exec rails s -p 3000 -b '0.0.0.0'
volumes:
- .:/app
ports:
- 3000:3000
depends_on:
- db
tty: true
stdin_open: true
db:
image: mysql:5.7
volumes:
- db-volume:/var/lib/mysql
environment:
MYSQL_ROOT_PASSWORD: password
volumes:
db-volume:
source 'https://rubygems.org'
gem 'rails', '5.2.3'
#STEP2 dockerコンテナ内でrailsを立ち上げる
以下コマンドをターミナルで実行
docker-compose run web rails new . --force --database=mysql --webpack=vue --skip-coffee
###ここでエラー発生
% docker-compose run web rails new . --force --database=mysql --webpack=vue --skip-coffee
Creating network "project_vue_default" with the default driver
・
・
[!] There was an error parsing `Gemfile`: unterminated string meets end of file - gem 'rails', '5.2.3
^. Bundler cannot continue.
# from /app/Gemfile:2
# -------------------------------------------
# source 'https://rubygems.org'
> gem 'rails', '5.2.3
# -------------------------------------------
ERROR: Service 'web' failed to build : The command '/bin/sh -c bundle install' returned a non-zero code: 4
Gemfileの'5.2.3の最後の'をvimで編集したときに誤って消してしまったみたい。クゥウ凡ミスじゃ〜
もう一回docker-compose run web rails new . --force --database=mysql --webpack=vue --skip-coffee叩いたらいけました。めちゃくちゃ時間かかったけど。
いっぱいファイルができてます。
Dockerfile config postcss.config.js
Gemfile config.ru public
Gemfile.lock db storage
README.md docker-compose.yml test
Rakefile lib tmp
app log vendor
babel.config.js node_modules yarn.lock
bin package.json
#STEP3 config/database.ymlを編集
passwordとhostのデータベース名を入力して、保存
password: password ←docker-compose.ymlで指定したdbのパスワード
host: db ←docker-compose.ymlのservicesで指定したdbの名前
#STEP4 docker-compose up --buildをしたらHello Railsの画面に！！
なるはずが、ならず、参考記事と全く同じエラーが。
とりあえずcontrol+qしてサーバーを落とし、解決策のコマンドを叩くが、コンテナーが無いでと怒られる。
懐かしいなこのエラー。
% docker-compose exec web rails db:create
ERROR: No container found for web_1
なのでデタッチモードで一度コンテナをupし直し、db:createコマンドを再度叩くと..
% docker-compose up -d
Starting project_vue_db_1 ... done
Starting project_vue_web_1 ... done
% docker-compose exec web rails db:create
Created database 'app_development'
Created database 'app_test'
懐かしのRailsの画面が！！
ただいまRails〜
#ここからVueを導入していく
こちらの記事を参照しました
% docker-compose run web bin/webpack
% docker-compose exec web bash
rootxxxx# rails g controller Page home
exitで抜けるとコンテナが終了してしまうのでで、Ctrl + P + Q で抜ける。
% vi config/routes.rb
でroutes.rbを開き、以下のように編集＆保存
Rails.application.routes.draw do
root to: 'page#home'
end
vimでapp/views/page/home.html.erbを開いて、以下のように編集＆保存
% vi app/views/page/home.html.erb
<h1>Page#home</h1>
<p>Find me in app/views/page/home.html.erb</p>
<%=javascript_pack_tag 'hello_vue'%>
できたーーー！
初めてのVue導入に成功しました！嬉しい！Vueの使い方知らないけど！
後から見つけたけどこの記事の方がわかりやすいかも。Railsの画面はlocal:3000, vueは8080で作る見たい。
#Vueを1日全力で習得する
今の状況: jsはとりあえず読めるようになった。jQueryも読める。でも一からは書けない。
チュートリアルをやり込んでる暇はないが、vueでフロントエンド開発してみたい！
そんな時にこんな記事を見つけた↓
私も全力でvueを導入してみようと思う。
#そもそもLINE Messaging APIって何ができるの？
参考記事
・ユーザーが送ったコンテンツ(画像・動画・音声・ファイル)の取得
・ユーザーのプロフィールの取得(ユーザー名・プロフィール画像・ステータスメッセージの3つのみ）
・グループチャットへの参加(Developperツールで設定が必要)
・ビーコンの利用
・アカウント連携
・リッチメニューの利用
・送信メッセージ数の取得
・多様な形式のメッセージの送信
#参考記事
有益な記事をありがとうございます。
Special Thanks:))
#####Docker + Rails + Vueの環境構築↓
#####Docker + Rails + Vueの環境構築(英語の記事)↓
#####Railsバックエンド + Vueフロントをどう連携させればいいのかの参考↓
#####LINE Messaging APIについて↓
#####Pythonだけど、体重を報告すると前報告した時より減ったのか増えたのか報告してくれるチャットbotが作れる
#####Docker for Macだと開発スピードが遅くなるらしく、Vagrant で Ubuntu を立ち上げ、その中で Docker を起動するやり方が書いてある↓