20200103のNode.jsに関する記事は5件です。

4年ぶりにエンジニアに戻った人の話

こんにちは、Qiita初投稿です。

色々あって昨年末に4年間勤めていた外資系のゲーム会社でのプロデューサー業を辞めてエンジニアに戻りました。
前職ではエンジニアではなく、翻訳やアカウントマネージメント系の仕事などをやっていました。
エンジニアブログを書く前に、今回は元エンジニアが4年間経ってエンジニアに戻って世界が一変していた、浦島太郎のような話をしたいと思います。

経歴:

2011年: 大手企業に新卒でエンジニア就職

秋入社というのもありまさかの新卒唯一の日本人、まわりは中国人とインド人ばっかり。入社一日目でエンジニア職人気なさすぎオワタと思う。まわりのエンジニアが毎月行われれていた深夜作業に駆り出されていくのを怯える毎日(結局一度もその作業をすることはなかったが)

2013年: ベンチャー企業へ転職

前職ではテスト業務しか触れず、いつの間にかポジションもQAエンジニアになってしまったのでエンジニアらしいことがしたいと一念発起して、当時黎明期だったモバイルアプリ業界へ転職。たまたま入社直後にアプリがヒットし、会社が急成長。カスタマーサポート担当→QAエンジニア→サーバーエンジニアと役割を変え、気づいたらエンジニアリードになっていった。

2015年: 外資系ゲーム会社へ転職

ヘッドハンティングで当時日本サーバーを建てようとしていた世界的人気のゲームを運営する会社へ入社。エンジニアではなく語学力+QA経験でLocalization QAを任される。そのうち、「君これもできるよね?」というノリでユーザーコミュニケーション担当をやっていたら、そちらが本業になりLocalizationチームから外れてMarketingチームへ異動。Abemaでテレビ番組のプロデューサーをやっていたら、半年で今度は当時のesports担当が外れたので急遽、責任者に就任。

2019年: 現在の会社へ

前職を8月末に辞表を出し11月末に退社(理由は色々あったので割愛)。就職先を決めていなかったので、「いい機会だし色んな業界の話を聞いてみよう」と多くの会社に面接に行っていたら現在の社長と意気投合、はれて4年ぶりにエンジニアに復職。

エンジニアに戻ってきて

前置きが長くなってしまいましたが、ここからが本題。まず転職時の感想ですが。

エンジニア職が好待遇に

昔はエンジニア職といえば3K(Kitsui, Kitanai, Kaerenai)のイメージが強かったです。実際「え、エンジニアなんてやってるんですか?」と大学時代の知り合いに言われたぐらいで、エンジニアなんてさっさとやめてマネージメントに入るのが勝ち組なんて影では言われていました。

正直直近の転職活動の時も、最初は「エンジニア戻るのはないなー」と思って、それでも経歴上エージェントから話が来るので渋々話を聞きにいっていたのですが。

…あれ?エンジニア職の待遇変わってね?

聞くと、今IT系エンジニアの求人倍率は10倍なんですね。昔は「私の代わりはいくらでもいるもの」という感じだったのですが、みんなどこへ行ってしまったのか…当然ながら給与も想像より上、同じように応募した翻訳やプロデューサー業よりも上でした。

技術の進歩

エンジニアに4年ぶりに戻るとあって、有給消化中はほぼ毎日10時間ぐらい今の技術を勉強に費やしていました。
完全にキャッチアップとはまだまだ遠いですが、思ったことを簡単に書くと、

サーバーインフラ構築が簡単に

本当にこれ、当時(2013年ぐらい)だとAWSのEC2とS3とCloudFront使ってサーバーエンジニアが汗と涙で毎回デプロイしてたのに、DockerとEBS組み合わせたら何も考えずにサーバーが建てられる、しかもコンテナモデルだからデプロイが速い速い。あとサーバーレスアーキテクチャを使ったマイクロサービスとか、昔だったらEC2の別サーバーでバッチ処理させるしかなかったのに、凄い(求: 語彙力)

Javascriptって便利じゃない?

昔のJavascriptには何度泣かされたことか。しかしいざ、Vue.js触ってみて思ったのが「これ以外の言語で非同期処理って書けるの?」とまで思わされてしまうほど、Javascriptが使える言語になっていたのに驚き。でも言語仕様はやっぱり好きじゃない

Pythonが主流言語に

これが地味に一番嬉しい。大学で時代を先取りしすぎた教授たちに「明日から課題はPythonで提出して」(当時はJavaで提出していた)と言われかれこれ10年以上Pythonを使っているのに、日本でPythonを使うのはスクリプト処理の時ぐらい。サーバーはRuby on Railsだったのも今は昔、若手のエンジニアから「RoR使ってるのは30代後半のおっさん」と言われ軽くショックを受けました。…ええそのせいもあって、弊社はDjangoでサーバー書いてます。

最後に

ここまでつらつらと書きました。エンジニアに戻ってまだ日も浅いのでまだまだわからないことが多いのですが、4年ぶりに戻ってきて思っていることは

  1. エンジニアは雇うから、育てる職種に
    エンジニアの待遇が良くなったという反面、優秀なエンジニアを採用するというのが本当に難しい時代になったと思います。反面、今までのような技術的なハードルは下がってきているので、きっちりと育てることのできるエンジニアをいかに採用し戦力としていくことが重要に思えます。

  2. エンジニアマーケットのグローバル化
    Pythonなどの言語が主流言語として台頭してくる中で、多くのドキュメントなどのリソースは英語で書かれており、海外には多くのコミュニティも存在します。そのため、日本語だけだと最先端の技術を取り込んでいくための情報量に限りがあります。10年ぐらい前からも言われていることですが、エンジニアとして今優先すべきは英語での語学力だと思っています。合わせて、採用も日本人だけでなく海外の技術者を取り込んでいくことが重要なファクターとなると考えています。

2をふまえて、今の会社でのエンジニア採用は「英語のみ可」に入社後に変更し、社内での英語の義務化を導入するか目下検討しています。1は会社のフェーズとして育てられる環境がないのでまだできていませんが、組織が安定してき次第取り掛かりたいと思っています。

ではでは

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

AWS+NodeJSでサーバレスな環境構築②

はじめに

前回の記事ではAPI Gateway+Lambda(NodeJS)を組み合わせてWEBページを表示するというアウトプットでした。今回はDynamoDBのテーブルと項目作成、Lambda関数で使うロールやインラインポリシーの設定を載せていきます。サーバレスに関しては個人的に興味があるとのと、次の案件で用いるからその予習になります。自身も初めてということもあり、表現がわかりにくいところもあるかもしれません。その場合は容赦無く、コメントで指摘していただければ幸いです。
※サーバレスに関してよくわからない方は、前回の記事をご覧いただければと思います。

DynamoDBってなぁに?

簡単に言ってしまうと、AWSがマネージドサービスとして提供しているNoSQL(非リレーショナル)データベースになります。「値」とそれを取得するための「キー」だけを格納するというシンプルな機能を持った「Key-Valueストア」です。

一般的なユースケース
・ミリ秒単位のアクセスレイテンシーが求められる
・データの拡張性が求められる

参考記事
NoSQLとは
DynamoDBをわかりやすく説明

DynamoDBテーブルの作成

DynamoDBダッシュボード>テーブルの作成>テーブル名とプライマリキーだけ入力>作成ボタン

スクリーンショット 2020-01-03 13.32.13.png

項目タブを選択>項目の作成>以下のように項目と値を追加

スクリーンショット 2020-01-03 15.19.31.png
スクリーンショット 2020-01-03 15.20.39.png

あとで使うので、DynamoDBテーブルのリソース名をコピー(黒枠部分)しておきます

スクリーンショット 2020-01-03 15.23.02.png

IAMでロールの作成

IAMダッシュボードのロールを選択>ロール作成ボタン

スクリーンショット 2020-01-03 15.40.49.png

Lambdaを選択>次のステップへ

スクリーンショット 2020-01-03 15.41.56.png

AWSLambdaBasicExecutionRoleにチェック>次のステップへ

スクリーンショット 2020-01-03 15.59.25.png

タグの追加 (オプション)そのまま>次のステップへ

スクリーンショット 2020-01-03 16.02.25.png

ロール名の入力>作成ボタン

スクリーンショット 2020-01-03 16.04.15.png

作成したロールでインラインポリシーの作成

ロール一覧から作成したロールを選択>概要画面でインラインポリシーの作成を選択

スクリーンショット 2020-01-03 16.09.06.png
スクリーンショット 2020-01-03 16.09.59.png

サービスをDynamoDBを選択>2つアクションを追加

⚠️ 下記ではGetItemとPutItemしか追加されませんが、DeleteItemとUpdateItemとScanも追加します。
スクリーンショット 2020-01-03 16.22.29.png

リソースのARNを指定>追加

スクリーンショット 2020-01-03 16.27.35.png

ポリシーの確認>ポリシー名>ポリシーの作成

スクリーンショット 2020-01-03 16.30.59.png
スクリーンショット 2020-01-03 16.35.04.png
スクリーンショット 2020-01-03 16.35.59.png

最後に

次回はAPI Gateway(REST API)+Lambda(NodeJS)+DynamoDBの組み合わせで、DynamoDBのテーブルが更新されるようにしていきます。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

LINEトークをwindows10(NODE.js+google-home-notifier+Firebase)経由でgooglehomeに話させる(2019.12 )

はじめに

windowsPCでLINE投稿内容をgooglehomeを話させてみました。先人達の記載の内容を参考にさせていただきました。ありがとうございます。
node v12.13.1
npm v6.12.1
google-home-notifier v1.2.0
windows 10pro

windowsにNODE.js環境

下記を参考にNODE.js環境を構築して、googlehomenotifierを導入します。
Windows PCを使ってGoogle Homeを喋らせてみた

すべてを[C:\Program Files\nodejs]下でインストール。
作業フォルダ配下にするべきでしたが、やりなおす気にはなれず。。
warningがたくさん出ましたが気にせず、進みました。

googlehomenotifier修正

下記を参考に修正
google-home-notifierで"Error: get key failed from google"とエラーが出る問題の対処法
Raspberry PiからGoogle Homeを喋らせる

cd node_modules/google-home-notifier
package.jsonを修正
"google-tts-api";"0.0.3" ⇒"google-tts-api";"0.0.4"
npm update google-tts-api

cd node_modules/mdns/lib
browser.jsを修正
rst.DNSServiceGetAddrInfo()rst.getaddrinfo({families:[4]})

LINE API設定

下記を参考にLINE developerのLINE APIを設定する。GUIが少し変更されている。
Google Home でLINEのメッセージを”おしゃべり”双方向通信(コミュニケーション)をしてみよう.

Messaging API settings
・use Webhook:enable
・Webhook URL:https://XXXXXXXXXXXXXXXXXX.firebaseio.com/line.json ※後述
・Allow bot to join group chats :Enabled
・QRコードからline-botを自分のline友達に追加

Firebase設定

下記を参考に、Firebaseを設定する。
新着メールを知らせてくれるGoogle Home

開発タブ内のDatabaseのルール設定では選択式で下記を選択。

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

config情報は後述のjsで使用する。

下記をインストールする。
npm install firebase
npm install superagent

コード

Google HomeにLINEのメッセージを読み上げさせる(LINE BOT+Webhook+Firebase+Node.js)
新着メールを知らせてくれるGoogle Home
以上のサイトをほぼ参考にさせていただいております。ありがとうございます。

この他には、
JavaScript でのインストールと設定
firebase. database. Reference
が参考になります。

var request = require('superagent');
var firebase = require("firebase");
var googlehome = require('./node_modules/google-home-notifier');
var language = 'ja';
googlehome.device('Google-Home', language); 

function googlehomespeak(text) {
googlehome.notify(text, function(res) {
  console.log(res);
});

}

  // Set the configuration for your app
  // TODO: Replace with your project's config object
  var config = {
    apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXXX.firebaseapp.com",
    databaseURL: "https://XXXXXXXXXXXX.firebaseio.com",
    projectId: "XXXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXXX.appspot.com",
    messagingSenderId: "XXXXXXXXXXXXX"
  };
  firebase.initializeApp(config);

  // Get a reference to the database service
  var database = firebase.database();


// Find the two shortest dinosaurs.
// var ref = firebase.database().ref("dinosaurs");
var ref = firebase.database().ref('/line');
ref.on("child_added", function(snapshot) {
  // This will be called exactly two times (unless there are less than two
  // dinosaurs in the Database).

  // It will also get fired again if one of the first two dinosaurs is
  // removed from the data set, as a new dinosaur will now be the second
  // shortest.

  var data = snapshot.val();
  snapshot.ref.remove();
 var text = data.events[0].message.text;

  console.log(snapshot.key);
  googlehomespeak(text);
});


送信テスト

Lineの友達にline-botを追加してグループを作成し、トークしてGoogleHomeが話すか確認する。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

[初心者向け]IBM Cloud のKubernetesクラスタにNode.jsアプリをデプロイ

はじめに

年が明けまして2020年を迎えましたが、皆様いかがお過ごしでしょうか。

2020年代は5Gの整備が完了し、IoTや自動運転技術が大いに浸透する10年であると言われていますが、2010年代も激動の10年でした。
特に、2013年ごろから開発が始まったKubernetesがようやくGA段階となり、各クラウドベンダーでマネージドサービスとして展開されたことが大きかったと思います。
これによってコンテナ技術やマイクロサービスがより管理しやすくなり、これから様々なサービスが生まれ進化してくことでしょう。

今回は、初投稿ではありながら、これからKubernetesを触ってみたい!という方のために、私がいろんな文献や技術書を読み漁って勉強した、

Kubernetesでアプリケーションを外部公開する手順

を、IBM Cloudを用いて紹介しようと思います。

※なお、筆者も勉強し始めで、詳しい技術や論理は理解している途中でございますので、深く知りたい!という方はこの後の参考資料をご覧ください。
この記事はあくまでアプリを開発してKubernetesにデプロイするまでの流れを紹介するものです。

Kubernetesとは?

Kubernetesロゴ

1. 読み方

そもそもどう読むの?くべ..くば..くばねってす?何語?ってなると思います。私もなりました。
いろんな動画を見ていると開発者の間ではクーバネ(ー)ティスと呼ばれているみたいです。クーバネティス。分かんねぇよ。
ギリシャ語で操舵手とか、航海長とかいう意味みたいですね。
では一体どういう技術何でしょうか??

2. Kubernetesとは

Wikipediaによれば
コンテナ化したアプリケーションのデプロイ、スケーリング、および管理を行うための、オープンソースのコンテナオーケストレーションシステム
とされています。

私が一番にお世話になった技術書(詳しくは後述の参考資料をご覧ください)にも
コンテナ化されたアプリケーションを合理的に運用するために設計されたOSSのプラットフォーム
として紹介されています。

すなわち、KubernetesはDockerなどでコンテナ化されたアプリケーションなどを運用、管理するために利用されるOSSのプラットフォームということですね。なんかすごそうですね。

それでは早速本題に入っていきます。

開発環境

macOS
node.js 12.2.0
npm 6.13.4
docker cli 19.03.5

前提条件

  1. Node.js, npmがインストール済みである。
  2. Gitコマンドが打てる。
  3. Dockerアカウントを作成済みである。

1. 事前準備

1-1. IBM Cloudのアカウントを作成

まずはじめに、IBM Cloudのアカウントを作成しましょう。

Kubernetesの利用方法は数多くありますが、クラウドベンダーが提供するKubernetesマネージドサービスを利用すれば、必要なものが全て揃っているのでとても便利です。
これを使う手はありませんね。

ここで注意ですが、IBM CloudのKubernetesサービス(以下、IKS)は、無料アカウントでは利用できず、クレジットカードの登録をして、従量課金アカウントへアップグレードしなくてはいけません
しかし、だからと言ってお金がかかる訳ではなく、1ヶ月間限定やワーカノードは1つのみなどの色々な制約はありますが、IKSにはフリークラスタの提供があり、Kubernetesを試すことは十分にできますのでご安心ください!

サークルの仮入部みたいな感じですね。
やべ、Kubernetesサークル、ちょうたのちぃ...となれば会費払って正式に入部すればいい訳です。

まずはここにアクセスして、IBM Cloudのアカウント作成ページに飛んでください。

順調にアカウント作成が進んだら以下の画面に進むと思います。

コンソール画面.png

ここから、右上にあるアカウントのアップグレードをポチりしてください。
必要な情報を入力して、I accept the Cloud Service termにチェックを入れたら完了です。はい、早い。

このダッシュボード画面はあとで操作するのでこのままにしておいてください。

1-2. IBM Cloud CLIのインストール

続いてIBM Cloud CLIをインストールしましょう。

これは、ご自身のPCのターミナルやコマンドプロンプトでIBM Cloudのリソースを管理することができるコマンドラインインタフェースであり、同時にKubernetes CLIもインストールされるため、Kubernetesの操作がコマンドで可能になります。
基本的にこの先Kubernetesをコマンドで操作していくことになるので是非ともIBM Cloud CLIのインストールを完了させておいてください。

私はすでにインストールを済ませてあるのでインストールコマンドだけ載せておきます。(詳しくはこちらをご覧ください。)

Terminal
#Mac, Linux用
$ curl -sL https://ibm.biz/idt-installer | bash

環境によってはインストールにかなり時間がかかると思います。

Terminal
$ ibmcloud -v
ibmcloud version 0.21.0+f5d1134-2019-12-16T07:34:45+00:00
Terminal
$ kubectl version --short
Client Version: v1.14.8

上記2つのコマンドを叩いてバージョンがうまく出ていればインストールは完了です!

2. Webアプリケーションを作成

2-1. Node.jsでアプリケーションを作成

事前準備が済んだら、早速デプロイするためのアプリケーションを作りましょう!
今回はGitHubに演習用の簡単なアプリケーションを作成しておきました。
是非使ってみてください。
Node.jsのアプリケーションです。
※Node.jsとnpmはインストール済みであることが前提条件です。

Terminal
$ git clone https://github.com/rikkyrice/kube-sample-app
Cloning into 'kube-sample-app'...
remote: Enumerating objects: 14, done.
remote: Counting objects: 100% (14/14), done.
remote: Compressing objects: 100% (9/9), done.
remote: Total 14 (delta 0), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (14/14), done.

これで簡単にkube-sample-appというNode.jsアプリケーションのディレクトリが作成されました。
アプリケーション自体はいたってシンプルで、以下のようなサイトが表示されます。

0.0.0.0-8080.png

これでWebアプリケーションの作成は終了です。はやっ

3. Dockerコンテナを作成する

続いてDockerにて生成したアプリケーションのコンテナを作成します。
Dockerはインストール済みであることが前提です。

3-1. Dockerfileの作成

それでは、コンテナ化する際に必要になるDockerfileを作成しましょう。
Dockerfileにはコンテナを動作させる構成情報を記載していきます。
kube-sample-appをGitHubからcloneしてきた人はすでにディレクトリにDockerfileがあると思います。

Dockerfile
FROM node:12
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 8080
CMD ["node", "app.js"]

3-2. コンテナのイメージを作成し、DockerHubへpush

続いてTerminalにて、kube-sample-appディレクトリのファイルからコンテナのイメージを作成します。
以下のコマンドをkube-sample-appディレクトリ上で行ってください。
${ユーザ名}にはあなたのDockerHubのユーザ名を入力してください。
私の場合はrikkyrice/kube-sample-app:0.1となります。

Terminal
$ docker build --tag ${ユーザ名}/kube-sample-app:0.1 .
Sending build context to Docker daemon    106kB
Step 1/7 : FROM node:12
 ---> 6b5991bf650f
Step 2/7 : WORKDIR /usr/src/app
 ---> Running in 02ac3c501da8
Removing intermediate container 02ac3c501da8
 ---> 7e8b2f94b323
Step 3/7 : COPY package*.json ./
 ---> 90cd726f65d3
Step 4/7 : RUN npm install
 ---> Running in 3abe5e4c5677

> ejs@3.0.1 postinstall /usr/src/app/node_modules/ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

added 64 packages from 39 contributors and audited 139 packages in 3.197s
found 2 moderate severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
Removing intermediate container 3abe5e4c5677
 ---> 6882306b5a87
Step 5/7 : COPY . .
 ---> 4085a1edc12c
Step 6/7 : EXPOSE 8080
 ---> Running in 794847f8f427
Removing intermediate container 794847f8f427
 ---> f8147522bc79
Step 7/7 : CMD ["node", "app.js"]
 ---> Running in dadc7ad0b91e
Removing intermediate container dadc7ad0b91e
 ---> 1d08c3fe706c
Successfully built 1d08c3fe706c
Successfully tagged ${ユーザ名}/kube-sample-app:0.1

これでDockerイメージが${ユーザ名}/kube-sample-app:0.1という名前で作成され、ローカルリポジトリへ保存されました。
そこからDockerにログインし、ご自身のDockerHubのリモートリポジトリへイメージをpushします。
以下のコマンドを実行してください。

Terminal
$ docker login
Authenticating with existing credentials...
Login Succeeded
$ docker push ${ユーザ名}/kube-sample-app:0.1
The push refers to repository [docker.io/${ユーザ名}/kube-sample-app]
485558bdae5c: Pushed 
fe34ac93a512: Pushed 
91da8ffeb073: Pushed 
e204a1f85920: Pushed 
af817f759558: Pushed 
b5aa4fb76f12: Pushed 
f68782bbfa17: Pushed 
42f9c2f9c08e: Pushed 
99e8bd3efaaf: Pushed 
bee1e39d7c3a: Pushed 
1f59a4b2e206: Pushed 
0ca7f54856c0: Pushed 
ebb9ae013834: Pushed 
0.1: digest: sha256:15270113aa252fedf81d41066dd21a2cd7143fed7dc27649971bd9a6f2901ded size: 3051

これでご自身のDockerHubへイメージが格納されました。

いよいよKubernetesを触っていきます!

4. Kubernetesクラスタの作成

それではKubernetesのクラスタを作成しましょう。
基本的にアプリケーションはこのKubernetesクラスタのワーカノードが実行していきます。

4-1. IBM CloudからKubernetesクラスタを作成

先ほど事前準備で行ったIBM Cloudのアカウントダッシュボードを再度開いてください。

ダッシュボード.png

この右上にあるリソースの作成またはカタログを押すと、IBM Cloudのサービスを選択できる画面に進みます。
そこからカタログの検索kubernetesと入力し、Kubernetes Serviceを選択しましょう。

カタログ-kubernetes.png

画面が移動したらそのままCreateを押しましょう。

Kubernetes説明.png

クラスタの作成画面に移ります。
初期設定ではStandardが選択されていると思いますが、Freeを選択しましょう。
アカウントごとに一意の名前を自由に決められますが、今回はmyclusterとしておきます。
Create clusterを押してKubernetesクラスタを作成します!

cluster作成.png

Kubernetesクラスタの作成は約10分ほどかかります。
正月に余ったお餅でも食べながら気長に待ちましょう。

これでクラスタの作成は終了です。
次からはついにコンテナをクラスタへデプロイしていきます!

5. Kubernetesへコンテナをデプロイ

さぁついに最終章です。
Kubernetesにコンテナをデプロイしていきます!

5-1. ibmcloudへログイン

まずはターミナルを開いて、ibmcloudへログインしてください。

Terminal
$ ibmcloud login

このコマンドを叩くと、対話型のログインプロセスが起動します。
事前準備で作成したご自身のIBM Cloudアカウントのメールアドレスとパスワードを入力して、ログインを完了させてください。
OKと出れば、ログイン成功です。

5-2. Kubernetesをターミナルで操作

これから、IBM Cloudのダッシュボードで作成したKubernetesクラスタをターミナルで操作していくための準備をしていきます。
まず、作成したIBM CloudのKubernetesクラスタの画面のAccessタブを開き、次にAfter your cluster provisions, gain accessを順に実行していきます。

clusterダッシュボード.png

ターミナルを開いて、以下のコードを叩いてください。
Kubernetesクラスタの画面のコードをコピペすれば大丈夫です。

Terminal
$ ibmcloud ks cluster config --cluster ${クラスタid}

正常に動作すると、環境変数が吐き出されると思います。
これをexportします。

Terminal
OK
mycluster の構成は正常にダウンロードされました。

環境変数をエクスポートして Kubernetes の使用を開始してください。

export KUBECONFIG=/Users/hashikiriku/.bluemix/plugins/container-service/clusters/mycluster/kube-config-hou02-mycluster.yml

$ export KUBECONFIG=/Users/hashikiriku/.bluemix/plugins/container-service/clusters/mycluster/kube-config-hou02-mycluster.yml

これで、指定したKubernetesクラスタを端末で操作することができるようになりました!
試しに以下のコマンドを叩いてみましょう。

Terminal
$ kubectl get node
NAME            STATUS   ROLES    AGE     VERSION
10.76.215.133   Ready    <none>   6m45s   v1.14.9+IKS

うまくワーカノードが表示されていますね。

5-3. deployment.ymlとservice.ymlを作成、実行

さぁ、Kubernetesクラスタにアクセスできるようになったので、いよいよコンテナをデプロイしていきます。

コンテナをデプロイするためにはポッドを作成し、そこにコンテナを配置する必要があります。
そのポッドを作成したり、稼働数を管理するのに用いられるのがデプロイメントです。
今回はこのデプロイメントをdeployment.ymlというマニフェストファイルに記述していきます。
GitHubからkube-sample-appをcloneしてきた方はすでにディレクトリに存在していると思います。
deployment.ymlのspec.template.spec.containers[1].imageの${ユーザ名}は、ご自身のDockerHubアカウントのユーザ名に書き換えてください。

deployment.yml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: kube-sample-app
spec:
  replicas: 5
  selector:
    matchLabels:
      app: kube-sample-app
  template:
    metadata:
      labels:
        app: kube-sample-app
    spec:
      containers:
      - name: kube-sample-app
        image: ${ユーザ名}/kube-sample-app:0.1
        command:
        ports:
        - containerPort: 8080

これをターミナルで実行します。

Terminal
$ kubectl apply -f deployment.yml
deployment.apps/kube-sample-app created

これでポッドが作成されました。
今回はreplicasを5と設定し、稼働するポッドを5個生成するようにしました。
試しにポッドが5個作動しているか見てみます。

Terminal
$ kubectl get pod
NAME                              READY   STATUS    RESTARTS   AGE
kube-sample-app-f6478fbcc-74s4t   1/1     Running   0          3m18s
kube-sample-app-f6478fbcc-bbncl   1/1     Running   0          3m18s
kube-sample-app-f6478fbcc-lgk79   1/1     Running   0          3m18s
kube-sample-app-f6478fbcc-tplh6   1/1     Running   0          3m18s
kube-sample-app-f6478fbcc-znxq5   1/1     Running   0          3m18s

うまく動いているのがわかります。

しかし、これだけではブラウザからアクセスできません。
そこで、クライアントからのリクエストを受けるために必要なのがサービスです。
サービスにはいくつかタイプがあるのですが、今回はNodePortというタイプを用いて、ノードのIPアドレスに公開用ポート番号を開きます。
これで外部クライアントもポッドへアクセスすることができます。
今回はservice.ymlに設定を書き込んでいます。

service.yml
kind: Service
apiVersion: v1
metadata:
  name: kube-sample-app-service
spec:
  type: NodePort
  selector:
    app: kube-sample-app
  ports:
  - name: webserver
    protocol: TCP
    port: 8080

これをターミナルで実行します。

Terminal
$ kubectl apply -f service.yml
service/kube-sample-app-service created

これで外部ネットワークへ公開する準備が整いました。
アクセスURLはKubernetesクラスタが持つパブリックIPアドレスに公開用ポートが付与された形で提供されています。
KubernetesクラスタのパブリックIPアドレスはIBM CloudのKubernetesクラスタの管理画面でも確認できますが、以下のコマンドでも確認することができます。

Terminal
$ ibmcloud ks workers ${クラスタ名}
OK
ID                                                     パブリック IP       プライベート IP      フレーバー    状態     状況     ゾーン     バージョン   
kube-bo6of95d0e80ipchv6ag-mycluster-default-000000a8   184.***.***.**   10.76.215.133     free       normal   Ready   hou02    1.14.9_1544   

このパブリック IPというのがKubernetesクラスタのパブリックIPアドレスになります。
さらに以下のコマンドで、サービスがどの公開用ポートで開いているかを確認することができます。

Terminal
$ kubectl get service kube-sample-app-service
NAME                      TYPE       CLUSTER-IP       EXTERNAL-IP   PORT(S)          AGE
kube-sample-app-service   NodePort   172.21.213.190   <none>        8080:32175/TCP   28s

このPORT(S)にある、32175というのが公開用ポート番号です。
これで公開されているURLがわかりました。
私の環境ではhttp://184.***.***.**:32175/でアプリケーションが公開されています。
早速ブラウザで動作を確認してみましょう。

ブラウザ-アプリ確認.png

うまくアクセスできましたね!

他にもKubernetesには様々な機能があります。
例えばイングレスという機能を使えば、公開用のURLのパスへアプリケーションをマッピングしたり、HTTPS通信を実装したりすることもできます。
しかし、イングレスは標準クラスタのみでしか利用できません...残念っ
もし利用したかったら新しくフリークラスタではなく、標準クラスタを作成しましょう!

これ以外にもKubernetesには様々な機能があります。
私も今後もっともっと勉強して様々な技術をQiitaを通して紹介していこうと思います。

参考資料

・15Stepで習得 Dockerから入るKubernetes 高良真穂(著)

Dockerから入るKubernetes
私がもっともお世話になった技術書です。Kubernetesのことはもちろん、Dockerのことについても詳しく紹介されており、大変参考になります。今も隣にあります。私のこのQiita記事はこの本を参考に書いてありますので、もっともっと詳しく知りたい!という方は是非ともこの本を買って読んでください。個人開発から法人のシステム開発まで幅広く適用できる技術書です。また、IBM Cloud以外にも、GCPでのKubernetesの利用方法も書かれていますので、多くの方をターゲットにされた本だと思います。
amazonリンク (https://www.amazon.co.jp/dp/B08221TFBH/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)

・IBM Japan Channel(Youtube)


Youtubeチャンネルですね。これも大変お世話になっています。Kubernetesのハンズオンの紹介や、概念の説明をしたり、Kubernetesを小人の世界に例えて紹介されたりしています。是非ご覧ください。
URL(https://www.youtube.com/channel/UCR5bQwLkDls81oOkKbx45dw)

他にも色々参考にさせていただきましたが(例えばIBM公式の資料など)、最も参考にさせていただいた2点を紹介させていただきました。

終わりに

今回初めてQiitaの記事を書かせていただきました。
色々至らぬ点があると思います。
ここ間違ってるよ、とか、ここおかしいよ、とか。
是非ともご指摘いただければと存じます。
すぐに修正し、これからの励みにさせていただきます。
最後まで読んでいただきまして誠にありがとうございました。
良いお年を。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

RTA in Japan 2019のNodeCGレイアウトを動かしてみる

はじめに

RTA in JapanのNodeCGレイアウトを動かしてみるで起動までの道のりを解説しましたが、RTA in Japan 2019 Online以降のバージョンでセットアップ手順が変わったのでその解説です。
なお、差分以外の説明は適当なので前回の記事も参照してください。

この記事の目標

ローカル環境でRTA in Japan 2019のNodeCGレイアウトを動作させる。

事前に用意するもの

前と同じなので省略。Node.jsとyarnくらいは入れておいてください。

gitからダウンロード

コンソールで以下を実行。

git clone https://github.com/RTAinJapan/rtainjapan-layouts.git

git入れてない人はZIPファイルで直接ダウンロードしてもよいです。
git.png

Nodeパッケージインストール

NodeCG開発者のたゆまぬ努力により、パッケージインストールは以下の1回だけで済むようになりました。

cd rtainjapan-layouts
yarn

環境変数の設定

AdobeのWebフォントを利用しています。
環境変数として以下を設定してください。
TYPEKIT_ID=利用したいフォントのID
Adobeと契約していない場合は何でもいいので適当な値を設定してください。
Webフォントの読み込みに失敗しますが、一応使えます。

下記画像の塗りつぶしてる箇所が該当のID。
Adobe Font

アカウントに合わせたソース修正

自分のチャンネルに合わせてTwitchIDと配信タイトルのPrefixを設定します。

/src/extension/twitch.ts
const OUR_CHANNEL = 'pastan04';

const newTitle = `RTA in Japan 2019サンプル: ${newRun.title}`;

ビルド

yarn prod

この時TYPEKIT_IDの環境変数が読み込めていないエラーが出た場合は、環境変数が正しく設定されているか確認してみてください。
環境変数の反映には、コンソールの再起動等が必要になる場合があります。

Google APIの用意

前回と同じなので省略。

スプレッドシートの準備

文で説明するのはつらいのでキャプチャ画像で察してください。
1つのスプレッドシートを共有状態にし、以下3種のシートを用意してください。

ゲーム

ゲームシート

走者

走者シート

解説

解説シート

Configの用意

NodeCGのConfig

前回の説明では無くてもよいと書いていましたが、なるべくならあった方がよいので記載しておきます。
必要最小限の設定のみ記載していますが、全体を見たい方はこちらを参照してください。

.nodecg/cfg/nodecg.json
{
    "login": {
        "enabled": true,
        "sessionSecret": "saltだから適当な値でよいのだ",
        "twitch": {
            "enabled": true,
            "clientID": "TwitchAPIのclientID",
            "clientSecret": "TwitchAPIのclientSecret",
            "scope": "channel_editor",
            "allowedUsernames": [
                "ログインを許容するTwitchユーザID"
            ]
        }
    }
}

Twitchログインの設定をすると、NodeCGでゲームを切り替えた時に自動でチャンネル情報の書き換えが行われます。

レイアウト固有の設定

前回からちょっと構造が変わりました。

.nodecg/cfg/rtainjapan-layouts.json
{
    "twitter": {
        "targetWords": ["検索ワード。RTAinJapanとか"],
        "consumerKey": "TwitterAPIのConsumer Key",
        "consumerSecret": "TwitterAPIのConsumer Secret",
        "accessToken":"TwitterAPIのAccessToken",
        "accessTokenSecret":"TwitterAPIのAccessToken Secret"
    },
    "spotify": {
        "clientId": "SpotifyAPIのClient ID",
        "clientSecret": "SpotifyAPIのClient Secret"
    },
    "spreadsheetId": "スプレッドシートのURLのうち、/d/の後ろから末尾の/までのめちゃ長い英数記号文字",
    "googleApiKey": "APIキー"
}

それぞれのキー取得方法についてはあまり細かくは解説しないですが、どこの設定値かはわかるように各サービスのキャプチャを貼っておきます。

Twitch

それぞれ塗りつぶしているところ。
TwitchAPIの設定値
リダイレクトURLはhttp://[ホスト名]/login/auth/twitch

Twitter

それぞれ塗りつぶしているところ。
TwitterAPIの設定値

Google API

塗りつぶしているところのうち、上のAPIキーの方。
GoogleAPIの設定値

Spotify

オレンジで塗りつぶしているところ。
SpotifyAPIの設定値
リダイレクトURLはhttp://[ホスト名]/bundles/rtainjapan-layouts/spotify-callback/index.html

起動

yarn start
info: [nodecg/lib/server] NodeCG running on http://localhost:9090

上記のようなメッセージが表示されたら無事起動です。
メッセージに従い、ブラウザでアクセスしてみましょう。

アクセス

http://localhost:9090/を表示します。

TwitchのAPI設定をしている場合は以下が表示されます。
画面に従ってログインしてください。
Twitchログイン

TwitchのAPI設定をしていない場合、またはTwitchログインが完了した後は以下が表示されます。
NodeCGダッシュボード

Spotifyにログイン

2-MISCからログインします。画面に出た通りポチポチすればOKです。
NodeCG Spotify

動作確認

セットアップ画面

まずはセットアップ中のレイアウトを見てみましょう。
NodeCGダッシュボードから、GRAPHICS > BREAK-2.HTML

NodeCG break2

白抜きの箇所はHTML的に空白の領域で、下位レイヤの要素が映るようになっています。
RTA in Japan 2019を視聴されていた方はピンときたかもしれませんが、レイアウトの下位レイヤで動画を流すことによりRTAちゃんを動かしていました。

今回追加されたゲームレイアウト

QWOPはアスペクト比が特殊なため、専用のレイアウトが用意されています。
NodeCGダッシュボードから、GRAPHICS > QWOP.HTML

NodeCG qwop

OBSの設定

レイアウト登録

OBSのソース > 右クリ > 追加 > ブラウザを選択し、表示したいレイアウトのURLを入力します。
レイアウトのURLはダッシュボードで開いた時のものをそのまま入力すればよいです。
ローカルで起動しているNodeCGを参照する場合は以下となります。
http://localhost:9090/bundles/rtainjapan-layouts/graphics/qwop.html

TwitchAPIの設定をしている場合は、URLの末尾にkey情報が追加されるので、そこまで含めて登録します。
http://localhost:9090/bundles/rtainjapan-layouts/graphics/qwop.html?key=なんかめちゃ長いkey

OBS source

表示されていないときにソースをシャットダウンはチェックを入れるようにしましょう。
これを入れていないと、ソースを多数登録した時にムチャクチャ重くて画像等が上手く表示できないという事象がイベント中に発生しました。(裏話)

ゲーム設定

レイアウトの下に表示したいキャプチャデバイスなどのソースを登録してください。
あとは適当にクロップして黒枠のところに配置したら完成です。
OBS source game

★おしまい★

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む