はじめに
基本的なコマンドやプログラミング、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:))