【21.04.02】Docker × Rails × Vue.jsの環境を構築する

#はじめに
基本的なコマンドやプログラミング、Dockerの基礎知識がある前提で進めますので、
中級者さん向けの記事かと思います。

ちなみに私は現時点でRailsとDockerは環境構築したことはありますが、
Vue.jsは未経験です。
Reactならgemがあるのでそれを組み込むだけでいいみたいなのですが、
学習コストがかかるようなので、vueでフロントエンドを実装したいと思います。

私の環境

```
% sw_vers
ProductName:    Mac OS X
ProductVersion: 10.15.7
BuildVersion:   19H524
```



#STEP1. まずは環境構築

```terminal.terminal
//①プロジェクトファイルの新規作成&そのファイルに移動
% mkdir project_vue && cd project_vue
//必要な4ファイルを新規作成
% touch Dockerfile docker-compose.yml Gemfile
 Gemfile.lock
```
ここまでできたらvimでDockerfileを開いて以下をコピペ
(`% vi Dockerfile`でDockerが開けます)
(Dockerfile=Docker imageを作るための設計書です)
(ほぼ[こちらのQiita記事](https://bityl.co/6EYC)からコピペさせていただきました。)

```Dockerfile.
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をより簡単に管理するイメージ](https://eng-entrance.com/linux-package-apt-2)。Debian系のLinuxシステムにパッケージをインストールするか、削除するために使用される。
yarnとは？: jsのパッケージ管理ツールの1つ。npmのすごいバージョン。
curlコマンドとは？: 手軽に HTTPリクエストできるらしい([参考記事](https://qiita.com/yasuhiroki/items/a569d3371a66e365316f))

```docker-compose.yml
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:

```

```Gemfile
source 'https://rubygems.org'
gem 'rails', '5.2.3'
```

#STEP2 dockerコンテナ内でrailsを立ち上げる
以下コマンドをターミナルで実行

```terminal.
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`叩いたらいけました。めちゃくちゃ時間かかったけど。

いっぱいファイルができてます。

```projectfile
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のデータベース名を入力して、保存

```config/database.yml
  password: password 　　←docker-compose.ymlで指定したdbのパスワード
  host: db　　　　　　　　 ←docker-compose.ymlのservicesで指定したdbの名前
```

#STEP4 docker-compose up --buildをしたらHello Railsの画面に！！

なるはずが、ならず、[参考記事](https://bityl.co/6Ea5)と全く同じエラーが。
![スクリーンショット 2021-04-02 14.56.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619224/ed5a41ef-4fa1-abe9-359e-4f1ac7110bff.png)

とりあえずcontrol+qしてサーバーを落とし、解決策のコマンドを叩くが、コンテナーが無いでと怒られる。
懐かしいなこのエラー。

```terminal.
% 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〜

![スクリーンショット 2021-04-02 15.01.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619224/6df04242-3b61-d46a-3772-8bd7539ec46c.png)


#ここからVueを導入していく

[こちらの記事](https://bityl.co/6EaN)を参照しました

```terminal.
% 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を開き、以下のように編集＆保存

```config/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`

```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の使い方知らないけど！

![スクリーンショット 2021-04-02 15.28.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619224/fae9da1c-fbdb-9a4b-429e-8ca57d50c2e7.png)


後から見つけたけどこの記事の方がわかりやすいかも。Railsの画面はlocal:3000, vueは8080で作る見たい。

https://qiita.com/Kyou13/items/be9cdc10c54d39cded15

https://web-tips.2rta.com/2020/06/19/vue-rails-crud/

#Vueを1日全力で習得する

今の状況: jsはとりあえず読めるようになった。jQueryも読める。でも一からは書けない。
チュートリアルをやり込んでる暇はないが、vueでフロントエンド開発してみたい！
そんな時にこんな記事を見つけた↓

https://qiita.com/don-bu-rakko/items/9a1f7e3a18f526e446ea

私も全力でvueを導入してみようと思う。

#そもそもLINE Messaging APIって何ができるの？
[参考記事](https://penglue.jp/blog/line_marketing_messaging-api/#i)
・ユーザーが送ったコンテンツ(画像・動画・音声・ファイル)の取得
・ユーザーのプロフィールの取得(ユーザー名・プロフィール画像・ステータスメッセージの3つのみ）
・グループチャットへの参加(Developperツールで設定が必要)
・ビーコンの利用
・アカウント連携
・リッチメニューの利用
・送信メッセージ数の取得
・多様な形式のメッセージの送信




#参考記事
有益な記事をありがとうございます。
Special Thanks:))

#####Docker + Rails + Vueの環境構築↓

https://qiita.com/Rascal823/items/83f1f00ffab8df8bb63d

#####Docker + Rails + Vueの環境構築(英語の記事)↓

https://dev.to/sulmanweb/initialise-rails-api-backend-and-vuejs-app-frontend-in-docker-for-development-3ab2

#####Railsバックエンド + Vueフロントをどう連携させればいいのかの参考↓

https://qiita.com/tatsurou313/items/4f18c0d4d231e2fb55f4

#####LINE Messaging APIについて↓

https://qiita.com/kakakaori830/items/52e52d969800de61ce28

#####Pythonだけど、体重を報告すると前報告した時より減ったのか増えたのか報告してくれるチャットbotが作れる

https://dev.classmethod.jp/articles/learning-line-bot-and-aws-while-making-a-weight-management-app-first-half/

#####Docker for Macだと開発スピードが遅くなるらしく、Vagrant で Ubuntu を立ち上げ、その中で Docker を起動するやり方が書いてある↓

https://www.to-r.net/media/docer-cra/