Qiita投稿一覧サイトの見直し

Qiita投稿一覧サイトの見直し

前回宣言したようにnuxtを使ったアプリケーションの1つである
Qiita投稿一覧サイトを見直したいと思います。

具体的に何をするか

以下の4点に取り組もうと思います。

  1. 各依存関係のバージョンアップ
  2. トップへ移動の処理をvue-scrolltoに代替
  3. スタイルをscssで書き直す
  4. 処理の見直し、機能追加

各依存関係のバージョンアップ

依存関係の(マイナー)バージョンアップを行います。

name before after
nuxt ^1.1.1 ^1.4.2
axios ^0.17.1 ^0.18.0
element-ui ^2.0.11 ^2.4.6
babel-eslint ^7.2.3 ^7.2.3
eslint ^4.3.0 ^4.19.1
eslint-config-standard ^10.2.1 ^10.2.1
eslint-loader ^1.9.0 ^1.9.0
eslint-plugin-html ^2.7.0 ^3.2.2
eslint-plugin-import ^2.0.11 ^2.14.0
eslint-plugin-node ^5.1.1 ^5.2.1
eslint-plugin-promise ^3.5.0 ^3.8.0
eslint-plugin-standard ^3.0.1 ^3.0.1

トップへ移動の処理を「vue-scrollto」に代替

vue-scrolltoをインストールします。

1
npm install --save vue-scrollto

nuxt.config.jsに設定を追加

nuxt.config.jsのbuild内に以下の設定を追加します。

1
2
build: {
vendor: ['axios', 'element-ui', 'vue-scrollto'],

nuxt.config.jsのpluginsに以下の設定を追加します。

1
2
3
plugins: [
{ src: '~plugins/vue-scrollto', ssr: false }
],

vue-scrollto.jsの作成

/plugins/vue-scrollto.jsを作成します。

1
2
3
4
5
6
// plugins/vue-scrollto.js

import Vue from 'vue'

const VueScrolltop = require('vue-scrollto')
Vue.use(VueScrolltop)

スクロール処理をvue-scrolltoに置き換え

自前実装のスクロール処理をvue-scrolltoに置き換えます。

【before】

1
2
// pages/search.vue line:2
<div>
1
2
3
4
5
6
// plugins/vue-scrollto.js line:34~
<div v-if="250 < scrollY" class="page-component-up">
<transition name="fade">
<i class="el-icon-caret-top" @click="scrollTop" />
</transition>
</div>

【after】

1
2
// pages/search.vue line:2
<div id="page_top">
1
2
3
4
5
6
// plugins/vue-scrollto.js line:34~
<div v-if="250 < scrollY" class="page-component-up">
<a href="#" id="return-top" v-scroll-to="'#page_top'">
<i class="el-icon-caret-top" />
</a>
</div>

スタイルをscssで書き直す

まずは現在指定しているスタイルをscssに切り出したいと思います。
加えて、フォント指定もちゃんと行います。

Saasをコンパイルするための設定

まずはSCSSがコンパイル/読み込まれるよう、ローダーのインストールと設定を行います。

node-sassとsass-loaderのインストール

node-sasssass-loaderをインストールします。

1
npm install -D node-sass sass-loader
nuxt.config.jsに設定を追加

nuxt.config.jsに含めたいSCSSのファイルを指定します。

1
2
3
css: [
'@/assets/scss/main.scss'
],

これでSCSSがコンパイルされ、自動的にstyleタグに挿入されるようになります。

Nuxt Sass Resources Loaderの使用

設定を簡単に行うようにするため、nuxt-sass-resources-loaderを用います。

nuxt-sass-resources-loaderのインストール

nuxt-sass-resources-loaderをインストールします。

1
npm install nuxt-sass-resources-loader
nuxt.config.jsに設定を追加
1
2
3
4
5
module.exports = {
modules: [
// provide path to the file with resources
['nuxt-sass-resources-loader', '@/assets/scss/main.scss']
],

scssディレクトリの作成

assetsディレクトリ配下にfontsscssという名前のディレクトリを作成します。
役割は以下のようにします。

directory outline
fonts フォントファイルを配置
scss scssファイルを配置

スタイルをscssに切り出し

scssディレクトリ下にmain.scssを作成します。
粗いですが、いったん各ファイルのスタイルをこのmain.scssに全部まとめます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// main.scss
@charset "utf-8";

html, body {
word-spacing: 1px;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-size: 12px;
background-color: #59bb0c;
color: #fff;
a {
text-decoration: none;
&:link, &:visited {
color: #fff;
}
}

*, *:before, *:after {
margin: 0;
}
}
:
:
以下省略

フォント指定を行うscssの作成

フォントの選択

フォントはGoogle Fontsから選びます。今回はKosugi Maruにしました。
ダウンロード後、fontsディレクトリ下に配置します。

フォントの設定

scssディレクトリ下に_fonts.scssを作成します。
mixinを使用します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// _fonts.scss
@mixin font-face($name, $path, $weight: null, $style: null, $exts: ttf) {
$src: null;

$extmods: (
eot: "?",
svg: "#" + str-replace($name, " ", "_")
);

$formats: (
otf: "opentype",
ttf: "truetype"
);

@each $ext in $exts {
$extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
$format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
$src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
}

@font-face {
font-family: quote($name);
font-style: $style;
font-weight: $weight;
src: $src;
}
}

読み込む際はmain.scssに以下のように指定します。

1
2
3
4
5
// main.scss
@import './fonts';

@include font-face('Kosugi Maru', '~/assets/fonts/KosugiMaru-Regular', null, null, ttf);
font-family: 'Kosugi Maru', 'Segoe UI';

このほか、カラーコードなどの定数定義を行う_variales.scss、共通しているスタイルの定義を行う_partials.scssを作成しmain.scssで読み込むようにしました。

処理の見直し、機能追加

  • storeの利用 && actionでデータ取得を行うよう変更
  • async/awaitの利用
  • ページ表示時にcreated()のタイミングデータ取得を行っていた箇所をfetchで代替
  • コンポーネントの細分化(検索部分と検索結果を分離)
  • computedで値の状態管理
  • ローディング画面の追加
  • 投稿時間のフォーマット

に取り組みます。

Read More

Share

もう8月 X_X

先月は更新できなかった…

更新はなかったものの、インプットがとても多く新たな気づきがあり、実りの多い月でした。
関わってくださった全ての方に感謝です。
時間をかけて咀嚼/補強していきます。

これからの取り組み

今月から以下の3つに取り組みます。

  • 既存のアプリケーションのリファクタリング
  • 認証機能のあるWeb APIの勉強
  • このブログのSSL化

既存のアプリケーションのリファクタリング

主にnuxtを使ったアプリケーションを見直そうと思います。

認証機能のあるWeb APIの勉強

これまで自前で実装したことがなかったので勉強がてら挑戦します。
先日JWTを少しだけ触りました。不完全燃焼なので実装完了させたい。。。

このブログのSSL化

「not secure」が出るページがあることに気付きました。
なんでだろう。。。調べます。
こちらが原因でした。対応できるかな?

その他

nuxtの翻訳、年内に一度全てのページの翻訳を終わらせられたらと思い
空き時間にちょこちょこ取り組んでいます。
OSSのドキュメント、新しい技術を知るのにも役立ちますね!
英語力…は向上しているといいなぁ。

そういえば先日、直接プルリクを送りマージして頂けました。
#Gitlocalizeはjson形式のファイルをサポートしていないため
緊張しました〜@w@

Share

Google Kubernetes Engine 上で Spring Boot を動かしてみる

高幡不動のあじさい

先日、珈琲仲間に誘われて高幡不動のあじさいを観に行ってきました。
あいにくの雨でしたが、色んな種類のあじさいが綺麗に咲いていて心が洗われました。

写真の右側のようなあじさいを「がくあじさい」と呼ぶそうです。
これまで中央部分が単に咲いていない(これから開花する)んだと思ってた… (´▽`*)

meet K8s

その内、GCPがAWSのシェアを塗り替えるんじゃないかと思っているのと
DockerやKubernetesとうワードを見かけない日がないので
GCP上でKubernetesを触って理解を深めたいと思います。


2018/8/1 追記
世界的にシェアを見ればAWS、Microsoft、Googleの順なんですね!
Alibabaの勢いもすごい…


Dockerとは

Docker enables true independence between applications and infrastructure and developers and IT ops to unlock their potential and creates a model for better collaboration and innovation.

Containers are an abstraction at the app layer that packages code and dependencies together. Multiple containers can run on the same machine and share the OS kernel with other containers, each running as isolated processes in user space. Containers take up less space than VMs (container images are typically tens of MBs in size), and start almost instantly.

Docker社が開発しているコンテナ型の仮想環境を作成/配布/実行するためのプラットフォーム。
「コンテナ」と呼ばれる技術によりホストマシンのカーネルを利用しプロセスを隔離することで、あたかも別のマシン上のように動かすことができる。
ゲストOSをインストールした上でミドルウェアやライブラリ、アプリケーションを動かすハイパーバイザ型やホスト型の仮想実行環境と比べリソースを効率的に利用できるのが特徴。

開発環境の準備/統一に便利だな〜くらいの認識でしたが、最近は運用にも使われているよう。
まさしくDevOpsですね。

ハイパーバイザ型やホスト型の仮想実行環境を使うことが多いのですが
確かに時間もリソースもかかるので、そこが簡略できるのはとても魅力的。

Kubernetesとは

It has a large, rapidly growing ecosystem.
Kubernetes provides a container-centric management environment. It orchestrates computing, networking, and storage infrastructure on behalf of user workloads. This provides much of the simplicity of Platform as a Service (PaaS) with the flexibility of Infrastructure as a Service (IaaS), and enables portability across infrastructure providers.

コンテナオーケストレーションツールと称されるKubernetes。
コンテナ化されたアプリケーションのデプロイ、スケーリング、管理を行うために用いる。
コンテナオーケストレーションツールはKubernetesの他に、Docker SwarmやApache Mesosなどがある。

Kubernetesはクラスターが強力なのだそう。
GUIが用意されているし、オートスケーリングやロードバランシング、ヘルスチェック以外で自己修復もしてくれる。

オーケストレーション、賑やかな印象を受けます。

Kubernetes Clustersとは

KubernetesのアーキテクチャについてはTHENEWSTACKさんの図がわかりやすいです。
#ぱっと見た中では公式サイトのドキュメントから概要図を見つけられませんでした。

a Kubernetes cluster consists of at least one master and multiple compute nodes. The master is responsible for exposing the application program interface (API), scheduling the deployments and managing the overall cluster. Each node runs a container runtime, such as Docker or rkt, along with an agent that communicates with the master. The node also runs additional components for logging, monitoring, service discovery and optional add-ons. Nodes are the workhorses of a Kubernetes cluster. They expose compute, networking and storage resources to applications. Nodes can be virtual machines (VMs) running in a cloud or bare metal servers running within the data center.
A pod is a collection of one or more containers. The pod serves as Kubernetes’ core unit of management. Pods act as the logical boundary for containers sharing the same context and resources. The grouping mechanism of pods make up for the differences between containerization and virtualization by making it possible to run multiple dependent processes together. At runtime, pods can be scaled by creating replica sets, which ensure that the deployment always runs the desired number of pods.

Kubernetesのクラスターは少なくとも1つのマスターと複数のノードから構成されており、マスターはAPIの公開、デプロイのスケジューリング、すべてのクラスタの管理を行います。
各ノードはDockerなどのコンテナとマスターと通信するエージェントを実行します。加えて、ロギング、モニタリング、サービス検出やオプションのアドオンなど追加のコンポーネントも実行します。
ポッドは1つまたは複数のコンテナをグループ化します。このグループ化におけるメカニズムは、複数の依存プロセスを一緒に実行できるようにすることで、コンテナ化と仮想化の違いを補っています。実行時、ポッドはレプリカセットを作成することでスケールを可能にします。

…大雑把に言えば、マスターの配下にポッド、レプリカセット、サービス等Kubernetesオブジェクトがありロードバランシングを可能にしてしてくれているんですね。

実際に触ってみる

なんとなく概要をみたところでGCPのチュートリアルにトライします。
書いてあることを実行する中で2点エラーが発生したのでそこを中心に明記します。

Dockerizing your application

Creating a Dockerfile

ローカルでビルドした際にはうまくいったのですが、GCPでビルドを行った際にgradlewに権限がないとエラーが発生しました。


そこで実行権限を付与することで対応しました。

1
2
3
4
5
6
7
8
9
10
// Dockerfile
FROM openjdk:8-jdk-alpine
VOLUME /tmp
RUN mkdir /work
COPY . /work
WORKDIR /work
RUN chmod +x /work/gradlew
RUN /work/gradlew build
RUN mv /work/build/libs/*.jar /work/app.jar
ENTRYPOINT ["java", "-Djava.security.egd=file:/dev/.urandom", "-jar", "/work/app.jar"]

Create a cluster

クラスターを作成する際にzoneregionを指定してと言われました。

こちらは--zone=asia-northeast1をつけることで対応。
参照 => gcloud container clusters create

Deploy to the cluster

ポッドをデプロイ、デプロイしたポッドをロードバランシングで公開します。

EXTERNAL-IPに割り当てられたアドレスにアクセス、動作していることが確認できました。

Scaling and updating your application

Set the replica count

レプリカセットの値を3から2へ変更します。
スケールされていることが確認できました。

まとめ

難しいと思っていたK8sですが、触るだけなら簡単にできました。GCPのおかげですね!
動かすアプリケーションの規模が小さいこともあり、スケーリングの恩恵はあまり感じられませんでしたが
それでもお手軽さは感じることができました。

クラウド化によるPaas、IaaSでもすごいと感じるのに
さらにコンテナ化したものをオーケストレーションする技術まで出てきて
クラウドの技術革新には目を見張ります。

そもそも開発体制としてDockerを導入していないので
Kubernetesを業務で扱うことはないだろうけど
社内ツール類をコンテナ化してまとめられたらすっきりしそう。
弊社は(お客様の)鶴の一声がないと新しいツールの導入はまずないので難しいかな…。
少しでも便利に、安定に、なサイクルを模索していきたいところ。

The DevOps ハンドブック、読み始めました。

参考

Share