Nuxt.jsのプロジェクト立ち上げ
まえがき
開発案件をいくつか経験して、バックエンド（Rails）、フロントエンド（Nuxt.js）、インフラ（AWS、Firebase）の知見が備わったので、 拙くとも一つなにかサービスを作ることができそうなレベルになった！
私ごとだけども、一人暮らしから同棲生活と経験してきて、日々なあなあと過ごせてしまっているけども、 もうちょっと丁寧に生活できないかね？ 家事とか、買い物とか、ひとりならひとりなりのペースで。二人なら分担して。家族なら子供にお手伝いもさせて。 家の中のホワイトボードとか、共有のToDoメモ帳があればあらかた事足りるけども、 アプリにもうちょっとデザインして、使いやすくまとめられたらいいなと考えてました。
ということで、家事メモアプリ＜Kajiro＞を作ろうと思います。（お勉強がてら） 無事リリースまでこぎつけたらちょっと広告埋め込んで、小銭だけでも稼げたらなんてね・・・
やること
- Node.jsの準備
- Nuxtプロジェクト作成
- Nuxt.jsのインストール
- プロジェクトの作成
ミドルウェア系の準備
node.jsのインストール
nodebrewを使用して、安定版をインストール。stable便利だね！
$ nodebrew install stable
インストールできたNode.jsのバージョンを指定してuseを実行。
$ nodebrew use v14.15.4
Nuxtプロジェクト作成
npxでNuxtプロジェクトの雛形を作ってもらいます。
$ npx create-nuxt-app <project-name> create-nuxt-app v3.4.0 ✨ Generating Nuxt.js project in . ? Project name: kajiro-front ? Programming language: JavaScript ? Package manager: Npm ? UI framework: Vuetify.js ? Nuxt.js modules: Axios, Progressive Web App (PWA), Content ? Linting tools: ESLint ? Testing framework: None ? Rendering mode: Single Page App ? Deployment target: Server (Node.js hosting) ? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript) ? Continuous integration: None ? Version control system: Git
こんな感じで。 project-nameの箇所に"."とすると、現在のディレクトリに雛形を作ってくれます。 が、ディレクトリ内が空でないとエラーになるらしい。
調べたことメモ
Progressive Web App (PWA)
Webページをアプリのようにインストールして扱うことができるようにする技術。 AndroidでもiOSでも、ストアで扱ってもらえるようになったとかなんとかで、アプリ版開発までの繋ぎで使えそう。
Content
contentディレクトリから各種ドキュメントファイル（マークダウンとか）を取得できる。 content.nuxtjs.org
nuxtのインストール
$ npm install nuxt
最新のv2.14.12を使用することにしました。
起動
$ npm run dev
とりあえず実行できることを確認！
Ruby 2.6.6 / Rails 6.0.3 / MySQL 8.0.19の開発環境をDockerで構築
概略
- Dockerfileを作成
- docker-compose.ymlを作成
- Gemfile,Gemfile.lockを作成
- イメージ・コンテナの作成
- Rails初期設定
手順
まずは、アプリケーションのルートディレクトリを作り、その中で作業しますよ。
$ mkdir my_application
Dockerfile
下記の内容でDockerfileを作成します。
# イメージのベースラインにRuby2.6.6を指定
FROM ruby:2.6.6
# Railsに必要なパッケージ等をインストール
RUN 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
RUN apt-get update -qq && apt-get install -y --no-install-recommends build-essential nodejs curl git mariadb-client yarn
RUN gem install bundler
# ディレクトリを指定
ENV INSTALL_PATH /app
RUN mkdir $INSTALL_PATH
WORKDIR $INSTALL_PATH
# ローカルのGemfileとGemfile.lockをコピー
COPY ./Gemfile /app/Gemfile
COPY ./Gemfile.lock /app/Gemfile.lock
# Gemのインストール実行
RUN bundle install
# カレントディレクトリの内容をコピー
COPY . .
# http通信用に3000ポートを使用するっていうメモ
EXPOSE 3000
ruby2.6系をベースイメージに使ったとき、インストールするyarnのバージョンが都合悪い（？）らしく、 よくわかってないですがインストールページhttps://dl.yarnpkg.com/debian/から目的のバージョンを持ってきてます。
参考にした記事 https://qiita.com/me-654393/items/ac6f61f3eee66380ecd7
docker-compose.yml
docker-composeはこんな感じにしました。
# docker-compose.ymlフォーマットのバージョン指定
version: '3.8'
services:
# Railsコンテナ定義
web:
# Dockerfileを使用してイメージをビルド
build: .
# ポート3000が来たらrailsサーバーが応答
command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
# ローカルのsrcをコンテナにマウント
volumes:
- .:/app
ports:
- 3000:3000
# dbコンテナが先に起動するよう設定
depends_on:
- mysql
tty: true
stdin_open: true
# Webpackerコンテナ定義
webpacker:
<<: *app_base
command: bash -c "rm -rf public/packs && bin/webpack-dev-server"
ports:
- 3035:3035
# MySQLコンテナ定義
mysql:
# mysqlを使用してコンテナ作成
image: mysql:8.0.19
command: --default-authentication-plugin=mysql_native_password
volumes:
# データストアからマウント
- ./tmp/mysql:/var/lib/mysql
# コンテナ内の環境変数を定義
environment:
# mysqlのルートユーザーのパスワード設定(任意のパスワード)
MYSQL_ROOT_PASSWORD: password
ports:
- "3306:3306"
restart: always
MySQL8系を使うとき、ユーザーの認証方式が変わって"caching_sha2_password"という設定値がデフォになっているので、 開発環境としては特に拘らないので5系までと同じ設定"mysql_native_password"にしています。
Gemfile
下記のコマンドでGemfileを生成できる。
$ bundle init
Railsの目的のバージョンのみ書いておきます。
# frozen_string_literal: true
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '2.6.6'
gem 'rails', '~> 6.0.3'
Gemfile.lockは空で作っておきます。
$ touch Gemfile.lock
コンテナのビルド
あとはRailsのプロジェクトを作成して、ビルド。 できたら起動します。
$ docker-compose run web rails new . --force --database=mysql $ docker-compose build $ docker-compose up
Railsの初期設定
config/database.ymlを編集します。
default: &default
adapter: mysql2
encoding: utf8
pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
username: root
password: password # ここはDockerfileに設定した値
host: mysql # ここはdocker-compose.ymlに設定した名前
下記のコマンドでコンテナの中に入れますので、 DBを作成します。
$ docker exec -it my_application_web_1 bash /app# bundle exec rake db:create
実行確認
http://localhost:3000/にアクセス。 地球に人間が乗っていたらサクセス。
LINE Messaging APIを使用してチャットボットを作ってみる【①導入編】
オリジナルのチャットボットを作ってみた
先日の記事ではWebスクレイピングについて書きましたが、それで何を作っていたかというと、LineのMessagingAPIを使ったチャットボットを作っていました。
これです。
中身はスプラトゥーン２の武器をランダムで選んでくれる機能とか、フェスに投票して勝率を集計する機能とか、大したものではないですが盛り込んでいます。
作ってみて思うのは、「一般的なWebアプリケーションよりも簡単にできる」ということです。
UIはLINEのアプリケーションで既にデザインされており、こちらはシンプルな形式でコンテンツを配信するのみだからです。
あまりアプリケーションを作った経験がなくてもできると思うので、どうやって作るのかをいくつかの記事に分けて投稿していこうと思います。
続きを読む
RubyでWebスクレイピングして画像を一括ダウンロードする
まえがき
最近、Railsを使ってスプラトゥーン２のLineボットアプリを作ってみています。
作るにあたって、ゲームに登場するブキの画像をアプリ内で使いたかったんですが、公式がまとめて配布しているなんて都合の良いこともなく、地道にネットに転がっている画像を集めることになります。
何かを作るって時は大概こういう面倒な収集作業があるもので、時間もかかりますよね。
そこで、Webスクレイピングを使って、素材の収集作業を効率化しよう！となったわけです。
やりたいこと
対象はこのサイトです。
【スプラトゥーン2】全武器（ブキ）一覧とサブ・スペシャル｜ゲームエイト
各ブキ情報のページにお目当の画像があるので、
- 一覧ページから詳細ページのURLを取得
- 各詳細ページから画像URLを取得
- 画像URLからダウンロード
こんな流れで処理できれば、一発で全部取れんじゃん？
続きを読む
AWS認定 クラウドプラクティショナー試験に向けての準備（後編）
クラウドプラクティショナー試験に向けて学習すべきポイントと方法
2019年7月3日、クラウドプラクティショナー合格しました！
実際に受験してみて、個人的に思う特に学習すべきポイントを挙げると、下記3点でしょうか。
これらを覚えるための学習リソースは、以前記事にも一部記載しましたが、最終的に下記のラインナップでした。
- AWS Cloud Practitioner Essentials（Eラーニング）
- ホワイトペーパー（サービスの概要、Well-Architected-Framework、料金表の仕組み、セキュリティのベストプラクティス）
- AWSクラウドデザインパターン
[AWS-CloudDesignPattern] - AWS Black Belt Online Seminar
[AWS 認定クラウドプラクティショナー取得に向けて] - 模擬試験
※前回の記事
polar-bear-tech.hatenablog.com
一応、AWSの利用経験は2年程度ありましたが、準備期間として要したのは1カ月未満でした。決して高すぎるハードルではなく、しっかり準備すれば合格できる難易度に感じましたよ。
ただ、ナメてかかって落ちても1万円かかりますからね･･･
以下より、詳細なポイントと学習のための関連資料を書いていきますので、受験の参考にしていただければと思います。
※以下で紹介するのは、あくまで個人的に重要と考えたポイントであり、出題傾向を示唆するものではありません。
また、AWS認定の規約に則り、具体的な問題の内容などは記載していません。
続きを読む
AWS ルートアカウントのMFA（多要素認証）を有効にする
AWSのアカウントを作成したら早めにやっておこう
AWSにおけるルートユーザーアカウントは、AWS IAMの管理ができて、リソースへのフルアクセスが可能なアカウント。
もし乗っ取られたら･･･ユーザーは抹殺され、リソースは蹂躙され、完全に支配されてしまうでしょう。
なので、AWSのベストプラクティスに従ってMFAを有効化してみようという記事です。
AWS Trusted Adviserを使用して、セキュリティ設定の最適化推奨事項がみられますが、AWSアカウントを登録してIAMユーザーを１つ作成した時点で下図のようになっています。
重要なチェック事項として「ルートアカウントのMFA」が挙げられています。
これに対応していきます。
手順の概要
ざっくり下記の流れです。
- MFAに使用できるアプリをスマホにインストールする
- ルートユーザーアカウントでサインイン
- IAMダッシュボードからセキュリティ認証情報設定画面へ
- MFAの有効化を選択する
- MFAアプリを使用してQRコードを読み取り、連携設定をする
ルートユーザーアカウントのMFAを有効化する
まず、AWSコンソールにルートユーザーアカウントでログインして、IAMのダッシュボードを開きます。
IAMユーザーの作成やポリシー設定などは既に行ったうえで、Warningマークがついている「ルートアカウントのMFAを有効化」項目を開き、ボタンをクリックします。
すると、「セキュリティ認証情報」という画面に移動しますので、「多要素認証（MFA)」項目を開き、ボタンをクリックします。
ポップアップ画面が表示されるのでで、MFA認証デバイスの登録を行っていきます。
今回使用するのは、仮想MFAデバイスなので、一番目の項目を選択。
ここでQRコードの表示とMFAコードの入力項目が出てきます。
「QRコードの表示」をクリックして表示させましょう。
MFAに使用するアプリケーションのインストール・設定
ページ下部の参考リンクにAWSの公式ページを載せました。
サポートされている仮想MFAアプリケーションの中から、「Authy 2段階認証」を使用したいと思います。
アプリケーションを実行して、基本設定をしましょう。
電話番号やメールアドレスの登録と、SMSによる番号認証があります。
基本設定が完了したら、＋マークからアカウントを追加します。
QRコードの読み取り画面に移るので、先ほどAWSコンソールに表示させたQRコードを読み取りましょう。
読み取ると、アカウントの情報をバックアップするための画面へ移ります。
例えばスマホをなくした、壊れたというときに、取り込んでいたアカウントの情報が一緒になくなってしまい、MFA認証できなくなった！となると詰んでしまうので、
ここでパスワードをかけてバックアップできるようです。
次に、アカウント情報に名前とアイコンを付けます。
カギマークをタップすると、アイコンの選択肢が出てきますので、「Amazon Web Service」を選ぶと、他のMFA認証を追加していく際に判別しやすくできますね！
アカウント名は任意でよいかと思います。
設定が完了するとおもしろいポップアップ。
Authyを使って2段階認証を設定しました！という情報をシェアしませんか？という。
もちろんエンジニア映えするのでTweetしました。
I am now using two-factor authentication to protect my online accounts - #authentication via @Authy pic.twitter.com/i41qdnAUKC
— はたらくしろくま (@polar_bear_tech) June 27, 2019
そして認証コードが表示されるようになりました！
一時的な番号なので張ってもオッケー。
AWSコンソールにMFAデバイスを登録する（仕上げ）
最後に、AWSコンソール側にMFAコードを入力します。
コードは30秒で切り替わりますが、連続2回分のMFAコードを入力すればOKです。
「MFAの割り当て」ボタンをクリックして、完了！
動作確認
一度サインアウトして、うまく設定できているか確認しましょう。
できたらサインインのフローとして下図のような入力画面が増えます。
Trusted Adviser先生のお怒りは静まったかな･･･？
静まりたもうた。
終わりに
AWSは1年間無料枠があって、気軽に体験できるようになっているけど、
気軽に使い始めた時にセキュリティ周りを設定していないと、万が一ってこともある。
ぶっちゃけ始めてAWS触ってみた時はこんな設定存在も知らなかったのでやっていなかった。
これを設定するきっかけは、Trusted Adviser先生の存在を知ったことと、AWSのベストプラクティスを軽く学習したおかげだった。
セキュリティ設定は甘く見ないで丁寧にやっていかねばと心に刻んだ次第です。
参考
MFAに関するAWSのページ
https://aws.amazon.com/jp/iam/details/mfa/
