.NET Core 3 Previewを適用してみる

 .NET Core 3のプレビューが6まで進んでいる。このブログは.NET Coreで作っているので、3への移行準備としてPreviewバージョンで動かしてみた。


 移行のために従ったページは↓
https://docs.microsoft.com/en-us/aspnet/core/migration/22-to-30?view=aspnetcore-2.2&tabs=visual-studio

 移行のDiffは↓
https://github.com/hMatoba/tetsujin/pull/86/files
https://github.com/hMatoba/tetsujin/pull/87/files

 実際の手順としては、まず.NET Core 3.0をVisualStudioから使えるようにしなければならなかったので、VisualStudioの最新のプレビューチャンネルを入れた。そしてそのVisualStudioでソリューションを開き、各プロジェクトのターゲットフレームワークを.NET Core 3.0に上げた。
 あとはマイグレーションガイドに従ったが、一つ、漏れがあって、ローカルでDockerを使って動かしていても問題なかったが、k8s環境で下記のエラーが出た。
System.InvalidOperationException: No service for type 'Microsoft.AspNetCore.Mvc.Infrastructure.IActionResultExecutor`1[Microsoft.AspNetCore.Mvc.JsonResult]' has been registered.

 このエラーを繰り返され、Podを何度も停止させた。エラーから察するにJSONを使うためのサービスがなさそうだったので、マイグレーションガイドに従ってNewtonsoftJSONを呼んだ。
services.AddMvc()

.AddNewtonsoftJson();


 ターゲットフレームワークのバージョン変更、Startup.csの変更などを経て、いまのところ問題なく動作するようになった。
comment: 0

WebにLottieのアニメーションを導入してみる


↑Lottieによるアニメーション

 Webでアニメーションを使おうとしたらGIF、FLASH、プレーヤ組み込みなどがあっただろか。このあたりでairbnb製の軽量なアニメーションリソースを使う手段として、Lottieというものが数年前に出てきている。
 Webで使うには、
1. Lottieのjsを読み込む
2. ↑で準備されるjsオブジェクトで、LottieアニメーションのリソースとなるJSONを読み込む

 IE11にも対応しているので汎用性は高い。Expressフレームワークを使って表示するまでをやってみる。

===

 まずJSプロジェクトの用意、パッケージのインストール。
npm init

npm i -S lottie-web express


---

 アプリケーションディレクトリをappという名前で作成して、app.jsを置く。静的ファイルをサーブできるようにしておく。
app/app.js

const express = require('express')
const app = express()

app.get('/', (req, res) => res.send('Hello World!'))

app.use(express.static('public'));

app.listen(3000, () => console.log('Example app listening on port 3000!'))


---

 ディレクトリapp/public/jsに、lottieのJSをコピーする。
$ cp node_modules/lottie-web/build/player/lottie.js app/js/lottie.js 


---

 表示したいlottieアニメーションのJSONを用意して、ディレクトリapp/public/lottie_jsonに入れておく。

---

 ディレクトリapp/publicにdemo.htmlを用意して、lottieのJS、lottieアニメーションのJSONを読み込ませる。
app/public/demo.html

<!DOCTYPE html>
<html lang="ja">
<head>

<meta charset="UTF-8" />
<title>Demo</title>
<style>
#demo {
width: 400px;
height: 400px;
}
</style>

</head>
<body>

<!-- lottie animation region -->
<div id="demo"> </div>

<!-- load lottie and animation json -->
<script src="js/lottie.min.js"></script>
<script>
lottie.loadAnimation({
container: document.getElementById('demo'),
renderer: 'svg',
loop: true,
autoplay: true,
path: '/lottie_json/Voice.json'
});
</script>

</body>
</html>


---

 サーバを走らせて、localhost:3000/demo.htmlにアクセスする。
cd app && node app.js




===
今回のリソースをまとめたリポジトリ

 これ書いてる時点でlottie.min.jsが245kB。今回使用したアニメーションのJSONは10kB。一度lottie.min.jsonを読み込んでしまえば、あとのアニメーション追加はそんなにコストにならないなという印象。アニメーション追加の方法として抑えておきたい。アニメーションアイコンとかよさげ。

comment: 0

[私感]Angularの学び方

 さいきん、仕事でAngular 7を使っている。それまでAngularを触ったことはなかった。

 Angularでライブラリを作る場合、それはモジュールにコンポーネント、サービス、ディレクティブの三つをつっこむことになる。三つがつっこまれたモジュールをインポートすることで、そのなかのコンポーネント、サービス、ディレクティブが一気に使えるようになる。そしてその三つ以外を基本的には宣言してはいけない。クラスはおろか、文字列や数値もだ。
decrable(Angular)

 基本はチュートリアルから学べばいい。それに加えてng-container、ng-template、ng-contentを理解しておく。とくにng-content。コンポーネントを使ったら下記のように自作コンポーネントに要素を入れる、というのをやりたくなるはず。これをやるためにコンポーネント定義でディレクティブng-contentを使う。
<my-div>

<span>foo</span>
</my-div>

comment: 0

ブログのバックエンドをKubernetesにしてみた

 去年のいつだったか、会社のエンジニアではない人に「なんでうちのエンジニアたちはKubernetesを使いたがっているの?」と質問された。エンジニアではない人もPaaSなどがわかるように教育されていたおかげでわりと簡単に答えられた。「PaaSはサーバ管理を任せられるし、スケーリングやローリングアップデートなんかもワンクリックで済むぐらいの簡単さがある。だけどそれは各クラウドベンダがそれぞれのやり方で実装しているものだから、ベンダロックインを受けてしまう。k8sは前に挙げた便利機能を持っている。そしてどこで動かしたっていいからベンダロックインを回避できる」と答えた。

 去年の年末、このブログを動かしていたコンテナホスティングサービスからサービス終了の告知が来た。コストなどを少し考えた上でAzureのマネージドのk8s、つまりAKSを使うことにした。
 ぼくの説明は本当に正しかったのか試す機会を得た。この、Dockerイメージ化されてコンテナホスティングサービスで動いていたブログをAKSに移行するのに、どの程度Azure独自のことをしなければならず、どの程度k8sの設定で済むのか。そんなところをやってみた。Dockerイメージ化されたブログを、Let's Encryptで証明書を取得、自動更新しつつHTTPSで配信するという構成。


 k8sに配置するリソースは下記のものを用意した。YAMLの詳細は後に回す。
- Deployment: アプリのPodをコントロール
- Ingress: http & httpsアクセス
- Service: Ingress - Pod間のネットワーキング
- Certificate: 証明書情報(Let's Encryptで取得)
- Secret: 外部データベース、クラウドストレージなどの接続情報
これらはもちろんk8sの標準的なリソースなのでAzureだから特別な書き方をしなければというのはない。標準的なYAMLだ。

 AKSでk8sを立ち上げてCLIで接続後、唯一Azure上の独自のやり方でやらなければならなかったのはIPの発行。まあここはさすがに仕方がないことだし、コマンドですぐに発行できるし。
az network public-ip create --resource-group [resource name] --name [ip name] --allocation-method static


IPを取得したらもちろん、DNS設定は忘れずに行う。

 デフォルト構成にHelmを加え、CertManagerを入れたが、これはk8s側に用意されたもので、WindowsでもCLIが動くので簡単にAKSのk8sへ入れることができた。
Azure Kubernetes Service (AKS) での Helm を使用したアプリケーションのインストール
helm install stable/nginx-ingress --namespace kube-system --set controller.service.loadBalancerIP="[ip]" --set controller.replicaCount=2 --set rbac.create=false --set rbac.createRole=false --set rbac.createClusterRole=false

helm install stable/cert-manager --namespace kube-system --set ingressShim.defaultIssuerName=letsencrypt-prod --set ingressShim.defaultIssuerKind=ClusterIssuer --set rbac.create=false --set serviceAccount.create=false


 IP取得&それのDNS設定、Helmが準備できれば、あとはk8s上にリソースを配置していくだけだ、YAMLを読み込ませることによって。あとドメインとIPが結びついてなけりゃ証明書取得はできるはずもないので忘れないこと。
apiVersion: apps/v1

kind: Deployment
metadata:
name: app-deployment
namespace: tetsujin
labels:
app: tetsujin
spec:
replicas: 1
selector:
matchLabels:
app: tetsujin
template:
metadata:
labels:
app: tetsujin
spec:
containers:
- name: tetsujin
image: matoba/tetsujin:414
ports:
- containerPort: 80
env:
- name: HASHKEY
valueFrom:
secretKeyRef:
name: tetsujin-secret
key: HASHKEY
- name: MONGO_CONNECTION
valueFrom:
secretKeyRef:
name: tetsujin-secret
key: MONGO_CONNECTION
- name: STORAGE_ACCOUNT
valueFrom:
secretKeyRef:
name: tetsujin-secret
key: STORAGE_ACCOUNT
- name: STORAGE_KEY
valueFrom:
secretKeyRef:
name: tetsujin-secret
key: STORAGE_KEY
- name: STORAGE_URL
valueFrom:
secretKeyRef:
name: tetsujin-secret
key: STORAGE_URL

↑のYAMLはCPUやメモリのリソース制限をかけていないのでよろしくない。自分の環境に合わせて適当に適切な設定をすること

apiVersion: v1

kind: Service
metadata:
name: tetsujin-service
namespace: tetsujin
labels:
network: tetsujin
spec:
type: NodePort
ports:
- port: 80
targetPort: 80
protocol: TCP
selector:
app: tetsujin


apiVersion: extensions/v1beta1

kind: Ingress
metadata:
name: ingress-tetsujin
namespace: tetsujin
annotations:
kubernetes.io/ingress.class: nginx
kubernetes.io/tls-acme: "true"
nginx.ingress.kubernetes.io/ssl-redirect: "true"
nginx.ingress.kubernetes.io/rewrite-target: /
ingress.appscode.com/hsts: "true"
ingress.appscode.com/hsts-preload: "true"
ingress.appscode.com/hsts-include-subdomains: "true"
ingress.appscode.com/hsts-max-age: "100000"
spec:
tls:
- hosts:
- blog.hmatoba.net
secretName: tls-secret
rules:
- host: blog.hmatoba.net
http:
paths:
- path: /
backend:
serviceName: tetsujin-service
servicePort: 80

↑もHSTS有効化はしたけどもう少しセキュアなものにしたい

apiVersion: certmanager.k8s.io/v1alpha1

kind: ClusterIssuer
metadata:
name: letsencrypt-prod
spec:
acme:
server: https://acme-v02.api.letsencrypt.org/directory
email: foo@example.com
privateKeySecretRef:
name: letsencrypt-prod
http01: {}


apiVersion: certmanager.k8s.io/v1alpha1

kind: Certificate
metadata:
name: tls-secret
spec:
secretName: tls-secret
dnsNames:
- blog.hmatoba.net
acme:
config:
- http01:
ingressClass: nginx
domains:
- blog.hmatoba.net
- http01:
ingress: ingress-tetsujin
domains:
- blog.hmatoba.net
issuerRef:
name: letsencrypt-prod
kind: ClusterIssuer




 上記のYAMLに加え、Secretを用意してしかるべき順でリソースをk8s上に加えていった結果このブログが動作した。Let's Encryptで取得した証明書でhttps化も問題ない。結局Azureのマネージドk8sサービスであるAKSを使ってWebアプリを公開するにあたってAzure独自でやらなければならないのは、Azureのコンパネに従ってk8sを用意することと、IPの発行だけであった。それらは簡単だったし一度で終わることなので、それ以外のことやこれからの運用はk8sのお作法に従うだけだろう。こりゃロックインは回避できてるなというところ。


 余談。AKSの料金は開始時に設定した仮想マシンリソースの設定に従う。仮想マシンリソース。CPUが何コアのメモリが何コアという、仮想マシンにありがちなアレ。アレはリザーブドインスタンスというものがあり、長期で先に金を払ってリソースを買っておくことで使用料が安くなる。一年分を先買いで40%OFF。断然お得。
comment: 0

転職雑感

 一年前にストレスでぼろぼろになっているところで転職した。転職にあたっては、会社で使っている技術ではアピールにならないと思ったので、OSS、Github、コミュニティあたりが鍵だった。
 それからまあ一年やってきて、身の回りでも転職の話を聞いてきたし、会社の人事ともちょっと立ち話をしてみたりで世間の事情を見て思うことがある。自分の転職から話を始めて、いくつか書いてみる。ニートから身を起こしたなりの二歩目のこととか。


・ちょっとでも会社に疑問を感じたら、転職の準備をしておく

 一年と少し前、メンタルがボロボロな状態に陥った。受注のタイミングから参加したプロジェクトだった。
 受注直後からクライアントとミーティングしつつそのあいま、アプリ改修のタスクをこなしながらもろもろ調べていると、要件漏れしている部分が大きすぎる、アプリ自体もjQueryより前の技術で書かれたSPAという高難易度案件ということがわかった。で、リソース足りないということを会社のえらいひとに相談に行ったところ、ほぼ全部をぼくの責任ということにされた。それでもうそこにいる気は完全になくした。のちに追加投入されたベテランに聞いたところ、まっとうにやるには計画の四倍はリソースが必要だよと笑っていた。

 その会社にいる気はなくしても、転職活動なんてやる気力は当初はほぼなかった。リソースが足りていないので平日はもちろん土日も深夜まで仕事をしていた。転職エージェントに電話を入れつつも、面談予定の日が来ると、都合が合わずに延期の電話を入れていた。
 半年ぐらい前から休日に参加していた勉強会があった。そこのメンバが採用でも動いているという話を聞いていたので、彼に試験を受けたい旨を伝えた。なんとかその面接だけ仕事の合間をこじあけて日程を作った。ここ一番の勝負どころだったが、面接をパスして内定を得ることができた。一次面接はカレー屋で行われた。「カレー、食わなきゃ冷めるぞ」と言われるおかしな面接だった。いい意味で。
 しかしそのカードを持っていなかったら今ごろもうちょっとボロボロになっていたと思う。

 前の会社に入って3か月で疑問を感じ、自分で勉強する内容の精査を始めた。そのときDockerを選んだ。それからさらに一年後に勉強会に参加するようになり、今の会社につなげてくれた彼に出会った。レガシーな技術しかやらないところでは得られないことを自分で学んでブログやOSSに反映していたこと、それを理解してくれる人との縁があったことが救いだと思う。
 前の会社に対して、ぼくもいたらないところはあったとは思う。だけどそこが初めてのキャリアであったが初日から一人で開発者としてアサインされ、メンバーをフォローしながらプロジェクトを回していたこと、誰もフォローしてくれない状況でも口うるさくセキュリティの啓蒙をしたことなどから負い目は感じていない。

・メンタルが傷ついてもその程度が自覚できない
 転職してから半年超、過ぎ去ったことでのいらないイライラが頻繁に湧いてくることに悩んだ。寺に修行に行く必要が出てきたかと思うぐらいにイライラしてくるのがコントロールできず、集中力がかなり落ちていた。忘れるというのはそんなに簡単なことではなかったし、どうにかかなり薄まったが、この先それが0になって消えることはないだろうと思う。


 とりあえずぼくがこれまでに得た教訓は、転職準備は、疑問を感じたなら早めにしておいたほうがいいということ。いつ無理な状況に陥るかというのはわからない。いまは転職のおかげで、そういう心配が薄い状況に移った。

・プログラマ(あるいはその界隈のエンジニア)の転職事情
 このご時世でプログラマの求人倍率は高いという話を聞く。すごい福利厚生のメルカリも目を見張るような採用計画を発表したりと。
 それでも結局企業が本音で欲しがっているのはしっかりしたキャリアとスキルだろう。そういう人はすんなりと有名所にいい条件で決まっていくのを見た。一方で会社に入ったばかりで具体的なスキルを持っていない人は、それなり多くの会社を受けているのを見ている。

 企業も人材不足から贅沢を言ってられないのを認めざるをえないというところで、新卒すら競争が激化しており、第二新卒で将来性を感じさせてくれる人を、という状況になっていると人事から聞いた。とくに東京のプログラマ界隈。
 第二新卒にはそれほど技術スキルは期待しない様子がある。まあそりゃ独学でどこまでいけるかなんて難しいもんだ。それでも内定を得るには、なにかでほかの求職者と差をつけなけりゃならない。やはり求人をかけていれさえすれば、求職者は二人、三人と応募があるだろうからその中での競争には勝つ必要がある。
 ぼくは求職の時、三年後だの将来だのにどうなりたいかなんて、じっさい始めてもいないのにわかるわけないだろうと思っていた。だけど、プログラマという界隈、下手をすればプライベートでも自分の時間や金を使って勉強が必要になるかもしれないようなこの職では、応募の最終競争に勝つため、技術を自分で吸収していけるというスキルを示すためにも、将来というのを具体的に面接で話せるようにしておくのはやっておいたほうがいいのかもしれない。いや実際これ難しいけど。

・Githubアカウントによるアピール

履歴書にはGitHubアカウントを書かない方が良い説

 ↑こんな話が出回ったことがある。
 Twitterで転職したいですと書いている人のGithubを覗くと、なにかの設定ファイルが置いてあるだけってのをいくらか見たことがある。まあ、なにが正しいというのはないだろう。
 個人的な考えとしてアピールとしたいなら、なにかのチュートリアルをやったなら、それをちょっと応用してみたところまではやりたい。たとえばフロントエンドエンジニアの求人に応募するならReactやAngularのチュートリアルをちょっと応用してみましたとか。バックエンドならDockerを使ってデータベース教材を作ってみましたとか。こういうところで、使っている技術を理解した上での、自分の考えを盛り込んでおくとアピールにつながりやすい。
 ただし、Githubをやっている人がそもそも限られた場所にいて、面接官として出会えないことがある。Githubのアカウントを伝えておいたのに内容をまったく見られていないことがある。というかあった。努力は報われないこともある。それでもいい会社に入りたけりゃ、努力はしておいたほうが結果はよくなる。


 プログラマの求人倍率は高いというが、それは大半がしっかりしたキャリアを歩んでいる人に対してであって、そのスタートに立とうとしている状況にいるなら、それは難易度イージーではないというのがぼくの視点から見たところの状況。
comment: 0