はじめに
学習をする中での備忘録。
やることはタイトル通り。
※注意
これまでバックエンドを1ヶ月半ほど、フロントを3ヶ月半ほど勉強した初学者です。
内容に間違い/不合理な点などある可能性が高いです。
アドバイスや間違いの指摘など頂けると嬉しいです。
ステップ1. dockerイメージの構築からRailsサーバ起動まで
まずはdocker+Railsの環境を整える。
・dockerインストール済み
・dbはmysql
・rails:5.2.3
・ruby:2.4.5
・sprocketsは削除せず、アセットパイプラインを使用
その他詳しい解説などは省く。
それ用のディレクトリを任意の場所に用意
mkdir test
配下に以下の4ファイルを作成
source'https://rubygems.org'# バージョンは適宜指定gem'rails','5.2.3'FROM ruby:2.4.5
RUN apt-get update -qq && apt-get install -y build-essential nodejs
RUN mkdir /app
WORKDIR /app
COPY Gemfile /app/Gemfile
COPY Gemfile.lock /app/Gemfile.lock
RUN bundle install
COPY . /app
version:'3'services:web:build:.command:bundle exec rails s -p 3000 -b '0.0.0.0'volumes:-.:/appports:-3000:3000depends_on:-dbtty:truestdin_open:truedb:image:mysql:5.7volumes:-db-volume:/var/lib/mysqlenvironment:MYSQL_ROOT_PASSWORD:passwordvolumes:db-volume:# 空ファイルRailsプロジェクトを作成
docker-compose run web rails new . --force --database=mysql --skip-turbolinks
forceでGemfile等を上書き、turbolinksは使わないのでskip
dockerイメージを再構築
docker-compose build
→Gemのインストールや作成されたRailsプロジェクトのファイル群をコンテナ内に取り込むために必要。
database.ymlを編集
...default:&defaultadapter:mysql2encoding:utf8pool:5username:root# 以下二行をmysql用に書き換えpassword:passwordhost:dbdevelopment:<<:*defaultdatabase:app_development...passwordはMYSQL_ROOT_PASSWORD環境変数の"password"
hostはMySQLサーバのコンテナのサービス名である"db"
コンテナの起動と確認
・コンテナ起動
docker-compose up
起動が確認できたら一旦停止してください。
データベースを作成
docker-compose run web bundle exec rails db:create
ローカルサーバへのアクセス確認
再度コンテナを起動し、ローカルサーバにアクセスする
docker-compose up
→http://localhost:3000へ飛びRailsサーバの起動を確認
ステップ2. Webpack+Vue.jsの導入
Webpackとパッケージのインストール
まずはRailsのルートディレクトリ(test)に/frontendを作成、移動
mkdir frontend
cd frontend
package.jsonを作成（設定はデフォルト値）
yarn init
必要なパッケージ達をインストール
yarn add vue webpack webpack-cli vue-loader vue-template-compiler css-loader style-loader babel-loader @babel/core @babel/preset-env sass-loader node-sass --save
webpack.config.jsの作成
/frontend/config/development/webpack.config.js/frontend/config/production/webpack.config.js
の2つを作成。
mkdir config
mkdir config/development
mkdir config/production
touch config/development/webpack.config.js
touch config/production/webpack.config.js
エントリーポイントとなるフォルダの作成
/frontend/src/javascripts/entry.jsを作成します。
mkdir src
mkdir src/javascripts
touch src/javascripts/entry.js
各種設定ファイルの編集
・development環境用の設定ファイルを編集
※ test/app/assets/javascript配下に出力されるようoutputパスを書き換えてください
constVueLoaderPlugin=require('vue-loader/lib/plugin');module.exports={devtool:'inline-source-map',mode:'development',entry:{webpack:'./src/javascripts/entry.js'},output:{// /app/assets以下に出力するよう、path:のキーを絶対パスで書き換えpath:'ここを書き換え/test/app/assets/javascripts',filename:'[name].js'},module:{rules:[{test:/\.js$/,exclude:/node_modules/,loader:'babel-loader'},{test:/\.vue$/,loader:'vue-loader'},{test:/\.css$/,use:['vue-style-loader','css-loader']},{test:/\.scss$/,use:['vue-style-loader','css-loader',{loader:'sass-loader',},],}]},resolve:{extensions:['.js','.vue'],alias:{vue$:'vue/dist/vue.esm.js',},},plugins:[newVueLoaderPlugin()]}・production環境用の設定ファイルを編集
※ development同様、outputパスを書き換えてください
constVueLoaderPlugin=require('vue-loader/lib/plugin');module.exports={mode:'production',entry:{webpack:'./src/javascripts/entry.js'},output:{// 書き換えpath:'書き換え/test/app/assets/javascripts',filename:'[name].js'},module:{rules:[{test:/\.js$/,exclude:/node_modules/,loader:'babel-loader',options:{presets:["@babel/preset-env"]}},{test:/\.vue$/,loader:'vue-loader'},{test:/\.css$/,use:['vue-style-loader','css-loader']},{test:/\.scss$/,use:['vue-style-loader','css-loader',{loader:'sass-loader',},],}]},resolve:{extensions:['.js','.vue'],alias:{vue$:'vue/dist/vue.esm.js',},},plugins:[newVueLoaderPlugin()],}ビルド用コマンドの追加
frontend/package.jsonに以下を追記。
"scripts":{"release":"webpack --config config/production/webpack.config.js","build":"webpack --config config/development/webpack.config.js","watch":"webpack --watch --config config/development/webpack.config.js"},ここまででVueを動かす環境と、Webpackを用いてバンドルファイルをビルドする準備が完了。
最後に、動作確認のため以下の作業を行う。
ステップ3. ここまでの動作確認
必要なファイルの準備
適当なコントローラを作る
cd ..
docker-compose run web bundle exec rails g controller tests
コントローラとルートを編集
defindexend# 追加resources:testsビューを作成
<divid="app"><p>{{name}}</p></div>Vueを書く
importVuefrom'vue';document.addEventListener("DOMContentLoaded",function(event){newVue({el:'#app',data:{name:'動作しています'}});});ビルドの実行
(frontend配下に移動)
yarn run build
動作確認
http://localhost:3000/testsにアクセスし、'動作しています'と表示されていれば完了。