Nuxt.jsでSPAをつくってGraphQLを試す 1

背景

社内向けWebサービスを開発するにあたってフロントにNuxt.jsを使い、そこからGitHub APIを叩けるようにしたいので、Nuxt.jsとGraphQLを試します。


今回はNuxt.jsの環境構築をします。

Nuxt.js準備

qiita.com

こちらを参考にDockerでNuxt.jsの開発環境を準備します。
プロジェクトディレクトを用意し、その中に Dockerfile , docker-compose.yml を作成します。

# node.jsの最新で軽量版のイメージを使う
FROM node:12.5.0-alpine

# docker run時の作業ディレクトリを指定
WORKDIR /app

# Alpine Linuxのアップデート、gitコマンドの追加、npmとvue-cliのインストールをする
RUN apk update && \
    apk add git && \
    npm install -g npm && \
    npm install -g vue-cli

# ホストのアドレスを指定
ENV HOST 0.0.0.0
# コンテナのポートを指定
EXPOSE 3000

<docker-compose.yml>

version: "3.7"

services:
  nuxt:
    build: . # ホストのカレントディレクトリ
    tty: true # コンテナを起動したままにする
    command: npm run dev # Nuxt.jsをdevモードで起動
    volumes:
      - .:/app # ホストとコンテナをマウント
    ports:
      - "3030:3000" # ホストのポートをコンテナに公開

ビルド

$ docker-compose build
Building nuxt
Step 1/5 : FROM node:12.5.0-alpine
12.5.0-alpine: Pulling from library/node
e7c96db7181b: Pull complete
ab61a92a7423: Pull complete
75e3a2159ea1: Pull complete
fc590254edeb: Pull complete
Digest: sha256:eb0e0412d130003354f8ab17e5832dc9eb0887c3010e642e285545dd8deb488f
Status: Downloaded newer image for node:12.5.0-alpine
 ---> c2ce71e31eb3
Step 2/5 : WORKDIR /app
 ---> Running in bc0f589650d8
Removing intermediate container bc0f589650d8
 ---> 77c77d6befa6
Step 3/5 : RUN apk update &&     apk add git &&     npm install -g npm &&     npm install -g vue-cli
 ---> Running in fba60e731206
fetch http://dl-cdn.alpinelinux.org/alpine/v3.9/main/x86_64/APKINDEX.tar.gz
fetch http://dl-cdn.alpinelinux.org/alpine/v3.9/community/x86_64/APKINDEX.tar.gz
v3.9.4-56-g011b9d5c5a [http://dl-cdn.alpinelinux.org/alpine/v3.9/main]
v3.9.4-55-g00c3f0f4eb [http://dl-cdn.alpinelinux.org/alpine/v3.9/community]
OK: 9770 distinct packages available
(1/7) Installing ca-certificates (20190108-r0)
(2/7) Installing nghttp2-libs (1.35.1-r0)
(3/7) Installing libssh2 (1.8.2-r0)
(4/7) Installing libcurl (7.64.0-r2)
(5/7) Installing expat (2.2.7-r0)
(6/7) Installing pcre2 (10.32-r1)
(7/7) Installing git (2.20.1-r0)
Executing busybox-1.29.3-r10.trigger
Executing ca-certificates-20190108-r0.trigger
OK: 22 MiB in 23 packages
/usr/local/bin/npm -> /usr/local/lib/node_modules/npm/bin/npm-cli.js
/usr/local/bin/npx -> /usr/local/lib/node_modules/npm/bin/npx-cli.js
+ npm@6.10.0
added 14 packages from 10 contributors, removed 5 packages and updated 17 packages in 13.86s
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
/usr/local/bin/vue -> /usr/local/lib/node_modules/vue-cli/bin/vue
/usr/local/bin/vue-init -> /usr/local/lib/node_modules/vue-cli/bin/vue-init
/usr/local/bin/vue-list -> /usr/local/lib/node_modules/vue-cli/bin/vue-list
+ vue-cli@2.9.6
added 239 packages from 206 contributors in 17.8s
Removing intermediate container fba60e731206
 ---> 807a3023e159
Step 4/5 : ENV HOST 0.0.0.0
 ---> Running in 3f92babcab61
Removing intermediate container 3f92babcab61
 ---> 77e79c1f7366
Step 5/5 : EXPOSE 3000
 ---> Running in 2d006747d64a
Removing intermediate container 2d006747d64a
 ---> 6141d08166ff

Successfully built 6141d08166ff
Successfully tagged nuxt-graphql-sample_nuxt:latest

Nuxt.jsインストール

フレームワークなどを選択していき、レンダリングモードまで行けば自動でインストールが始まります。

$ docker-compose run --rm nuxt npx create-nuxt-app
Creating network "nuxt-graphql-sample_default" with the default driver
npx: installed 377 in 35.776s
create-nuxt-app v2.8.0
✨  Generating Nuxt.js project in /app
? Project name nuxt-graphql-sample
? Project description My delightful Nuxt.js project
? Author name
? Choose the package manager Yarn
? Choose UI framework Vuetify.js
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose test framework Jest
? Choose rendering mode Single Page App

略

🎉  Successfully created project nuxt-graphql-sample

  To get started:

    yarn dev

  To build & start for production:

    yarn build
    yarn start

  To test:

    yarn test

起動

docker-compose.ymlでホストのポートを3030にしているので、 localhost:3030 をブラウザやcurlでたたいてWelcomeページが表示されれば成功です。

$ docker-compose up
Creating nuxt-graphql-sample_nuxt_1 ... done
Attaching to nuxt-graphql-sample_nuxt_1
nuxt_1  |
nuxt_1  | > nuxt-graphql-sample@1.0.0 dev /app
nuxt_1  | > nuxt
nuxt_1  |
nuxt_1  |
nuxt_1  |    ╭───────────────────────────────────────────╮
nuxt_1  |    │                                           │
nuxt_1  |    │   Nuxt.js v2.8.1                          │
nuxt_1  |    │   Running in development mode (spa)       │
nuxt_1  |    │                                           │
nuxt_1  |    │   Listening on: http://172.31.0.2:3000/   │
nuxt_1  |    │                                           │
nuxt_1  |    ╰───────────────────────────────────────────╯
nuxt_1  |
nuxt_1  | ℹ Preparing project for development

略

f:id:khanamoto:20190704113349j:plain

参考

docker で nuxt.js を開発環境を建てるだけ - Qiita

インストール - Nuxt.js

DockerfileのEXPOSEは実際に何かポートを開けているわけではない - コード日進月歩

Dockerfileを極めて、Dockerマスターになろう! - Qiita




つづく

【GoLand 2019.1】エディターの折り返し設定をする

※言語表記はデフォルトの英語で説明します。

GoLandでエディターの折り返し設定をする方法

  1. Preferences(環境設定)を開く
  2. Editor > General を開き、Soft Wrapsの「Soft-wrap files」にチェックを入れ、フォームに折り返したいファイル拡張子を追加する(たとえばGoファイルなら「*.go」。)
  3. Apply または OK ボタンを押して確定する

GoLand折り返し

余談

JetBrainsやGoLandの折り返し設定を検索しても、ピンポイントな情報がなかったので書きました。

VimでRustを書くための設定

VimでRustを書くための設定をする。
とりあえずプラグインいれるだけ。

概要

以下のプラグインを入れる。

github.com

github.com

プラグインマネージャーはVundleを使う。

github.com

手順

1.Vundleをインストールする

$ git clone https://github.com/VundleVim/Vundle.vim.git ~/.vim/bundle/Vundle.vim

.vimrc のトップに以下を追記

" Vundleの設定
set nocompatible
filetype off
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()

Plugin 'VundleVim/Vundle.vim'

" 導入したいプラグインを以下に列挙
" Plugin '[Github Author]/[Github repo]' の形式で記入
" Git差分を左に表示
Plugin 'airblade/vim-gitgutter'

call vundle#end()
filetype plugin indent on

2.vim-racerにはRacerが必要なので、Racerを先にインストールする

github.com

$ rustup toolchain add nightly
$ cargo +nightly install racer

racer 2.1からnightlyのrustが必要とのこと。 nightlyは最新の開発版。 ちなみに今日時点のnightly最新バージョンは1.31.0で、rust安定バージョンは1.29.1だった。

3.rust.vimvim-racerのインストールコードを .vimrc に追記する

Plugin 'rust-lang/rust.vim'
Plugin 'racer-rust/vim-racer'

4.vimプラグインのインストール

  • vim を開いた状態で
:PluginInstall

または

  • ターミナル上で
$ vim +PluginInstall +qall

5.vim-racerの設定を .vimrc に追記

" vim-racerの設定
set hidden
let g:racer_cmd = '~/.cargo/bin/racer'
let g:racer_experimental_completer = 1

以上

参考

Rust入門 for Vimmer - Qiita

Vim におけるプラグイン管理についてまとめてみた - Qiita

rustup で Rust コンパイラーを簡単インストール - Qiita

プラグインのREADMEドキュメント

画像アップローダー設置で参考にしたリンクまとめ

環境

  • Rails 5.2
  • CarrierWave 1.2.2
  • MiniMagick 4.8.0

本番環境への設定はまだ。開発環境のみ。

全般

Ruby on Rails チュートリアル:実例を使って Rails を学ぼう

Rails5とCarrierWaveを使って画像アップロード機能を作る - write ahead log

[Rails5] Carrierwave + S3 + CloudFrontで画像アップロードを実装する方法 - Qiita

CarrierWave

Rails CarrierWaveのファイル名を変更する方法 | | KeruuWeb

CarrierWaveのファイル名変換(original_filename)の挙動 - 備忘録。

Carrierwaveで画像をリサイズする - paranitips

MiniMagick

RubyでImageMagick使うにはMiniMagickの方がよい - 動かざることバグの如し
→これ「tiff対応のimagemagickでないとダメらしい」のエラー出るかと思ったけど、普通にimagemagickをDockerfileに追加するだけで大丈夫だった。Dockerだからか?

Docker

Docker for MacでRails5, MySQLとVue.jsの開発環境を作る | mn-memo

GitHub

GitHub - carrierwaveuploader/carrierwave: Classier solution for file uploads for Rails, Sinatra and other Ruby web frameworks

GitHub - minimagick/minimagick: mini replacement for RMagick

その他

Ruby の private と protected 。歴史と使い分け - Qiita

HerokuにRailsアプリの検証環境を立てる

開発中他の人に動作を確認してもらいたいときや、スマホ実機確認をするとき用に、Herokuに検証環境を作りました。

ちなみにステージング兼本番環境にはAWSを使う予定です。

環境

Herokuのアカウント新規登録

こちらから。 jp.heroku.com

Heroku CLIのインストール&SSHキーの登録

ターミナルなどでherokuコマンドを使えるようにCLIをインストールします。私はhomebrewで入れました。 devcenter.heroku.com

インストールできたらHerokuにログインして、SSHキーを登録します。

SSHキーの作成

$ ssh-keygen -t rsa -b 4096 -C "Herokuで使うメールアドレス"

キーの保存先はユーザーディレクトリの .ssh/id_heroku_rsa など パスフレーズも入力

Herokuにログインしてキー登録

$ heroku login

Enter your Heroku credentials:
Email: メールアドレス
Password: *************
Logged in as メールアドレス

$ heroku keys:add ~/.ssh/id_heroku_rsa.pub

heroku keys:add で引数を指定しなければデフォルトで ~/.ssh/id_rsa.pub か ~/.ssh/id_dsa.pub を探しに行くらしい。

アプリをHerokuにデプロイ

準備

アプリのディレクトリをどこかにまるごとコピーして以下のファイルを削除するか、ディレクト外に移動。

  • Dockerfile
  • docker-compose.yml
  • .git
  • .gitignore
  • .env

私はDockerで開発していてそのままHerokuに上げてもいいんですが、Dockerなしでデプロイする方法も知っておきたいので、今回はDocker関連のファイルは除去して上げました。

そしたらHerokuへのデプロイはgitを経由して行うので、 git init をしてもう一度gitの管理対象にします。

$ cd コピーしたアプリのディレクトリ
$ git init
$ git add .
$ git commit -m "feat: Initial commit"

デプロイ

コピーしたアプリのディレクトリにいる状態で、herokuコマンドでデプロイします。

// Herokuにアプリを作成する
$ heroku create アプリの名前

// デプロイ
$ git push heroku master

MySQLの設定

// MySQLを利用するためClearDBアドオンを入れる
$ heroku addons:create cleardb:ignite

Creating cleardb:ignite on ⬢ アプリ名... free
Created cleardb-cylindrical-85040 as CLEARDB_DATABASE_URL
Use heroku addons:docs cleardb to view documentation

// 設定確認
$ heroku config

=== アプリ名 Config Vars
CLEARDB_DATABASE_URL:     mysql://b2a3d6180457c6:be3c12f5@us-cdbr-iron-east-04.cleardb.net/heroku_b44817e2b39c626?reconnect=true
LANG:                     en_US.UTF-8
RACK_ENV:                 production
RAILS_ENV:                production
RAILS_LOG_TO_STDOUT:      enabled
RAILS_SERVE_STATIC_FILES: enabled
SECRET_KEY_BASE: ***

// RailsのGemの mysql2 に合わせてDBURLを追加 or 変更する。
$ heroku config:set DATABASE_URL=mysql2://b2a3d6180457c6:be3c12f5@us-cdbr-iron-east-04.cleardb.net/heroku_b44817e2b39c626?reconnect=true

Setting DATABASE_URL and restarting ⬢ アプリ名... done, v9
DATABASE_URL: mysql2://b2a3d6180457c6:be3c12f5@us-cdbr-iron-east-04.cleardb.net/heroku_b44817e2b39c626?reconnect=true

// 設定確認
$ heroku config

=== アプリ名 Config Vars
CLEARDB_DATABASE_URL:     mysql://b2a3d6180457c6:be3c12f5@us-cdbr-iron-east-04.cleardb.net/heroku_b44817e2b39c626?reconnect=true
DATABASE_URL:             mysql2://b2a3d6180457c6:be3c12f5@us-cdbr-iron-east-04.cleardb.net/heroku_b44817e2b39c626?reconnect=true
〜省略〜

ちなみにDATABASE_URLをセットするところで、「zsh: no matches found: DATABASE_URL=mysql2: 省略」というエラーが私は出ました。zshのエラーのようなので.zshrcに以下を追記したら通りました。

$ setopt nonomatch

// 変更を反映
$ source ~/.zshrc

shirusu-ni-tarazu.hatenablog.jp

環境変数の設定

環境変数はHerokuのサイトからか、コマンドで設定できます。
サイトからは アプリのダッシュボード>Settings>Config Vars
コマンドは以下

// heroku config:add 変数名="値" の形式
$ heroku config:add DB_NAME="DB名"
$ heroku config:add DB_USERNAME="DBユーザー名"
$ heroku config:add DB_PASSWORD="パスワード"

ここには書きませんが、ついでにベーシック認証の変数なども設定しました。

テーブルの作成

あとはマイグレーションをしてテーブルを作成するだけです。

$ heroku run rails db:migrate

作成できたらアクセスできるか確認します。
下のコマンドのWeb URLがアプリのURLです。ちゃんとアクセスできたらOKです。

// アプリの情報を見る
$ heroku apps:info
=== アプリ名
Addons:         cleardb:ignite
Auto Cert Mgmt: false
Dynos:          web: 1
Git URL:        https://git.heroku.com/アプリ名.git
Owner:          メールアドレス
Region:         us
Repo Size:      16 MB
Slug Size:      64 MB
Stack:          heroku-16
Web URL:        https://アプリ名.herokuapp.com/

まとめ

あとは機能の実装ができたら git add してHerokuにプッシュしていけば検証環境でサイトの動作をチェックできます。デプロイツールいれたい。


参考

ステージング環境とは?開発環境、検証環境との違いと役割 | WWWクリエイターズ

お前らのSSH Keysの作り方は間違っている - Qiita

Managing Your SSH Keys | Heroku Dev Center

Rails5 x MySQL を Herokuにデプロイする手順 | tackeyy.com

mysqlを使ったRailsアプリをHerokuにデプロイする流れ - Qiita

HerokuでMySQLを使おうとして詰まったところ - Qiita

Heroku データベースの管理(ClearDB アドオンによる MySQL の利用) - 君の瞳はまるでルビー - Ruby 関連まとめサイト

Herokuで本番環境の環境変数(config vars)を.envファイルで設定する - dackdive's blog