50000PV

雑記

特にたいしたものではないんですが、今朝たまたま見たらアクセス数の合計がちょうど 50000 だったのでｷﾘ番ｹﾞｯﾄ的な気持ちで記念にキャプチャしました。

f:id:knt_mr:20181003161126p:plain

よくアクセスされるページは、Spring や JMockit 関連が多い模様。あと、最近は Vue.js 関連のアクセスが多くなってきました。しかし、アクセス元のサイト (Google, Bing, Yahoo!検索) によってアクセスするページの傾向が違うのはちょっと興味深い。

Docker Compose を使って EC2 に Redmine をインストールする

AWS Docker Redmine

前回の続きというわけではないんですが、せっかく作成したインスタンスがあるので、Docker Compose を使って Redmine をインストールしてみました。備忘録。

AWS の10分間チュートリアルで EC2 インスタンスを起動してから HTTP アクセスするまで - kntmr-blog

バージョン情報

一応、カーネルのバージョンを確認。

$ uname -r
4.14.47-56.37.amzn1.x86_64

Docker インストール

$ sudo yum update -y
$ sudo yum install -y docker
$ docker -v
Docker version 18.03.1-ce, build 3dfb8343b139d6342acfd9975d7f1068b5b1c3d3
$ sudo service docker start
$ sudo usermod -a -G docker ec2-user # ec2-user を docker グループに追加
$ exit
# ssh 再接続する
$ docker info # sudo なしで OK

Docker Compose インストール

Install Docker Compose | Docker Documentation

$ sudo -i # スーパーユーザーで実行
$ curl -L https://github.com/docker/compose/releases/download/1.21.2/docker-compose-$(uname -s)-$(uname -m) -o /usr/local/bin/docker-compose
$ chmod +x /usr/local/bin/docker-compose # 実行権限付与
$ exit # スーパーユーザーここまで
$ docker-compose --version
docker-compose version 1.21.2, build a133471

docker-compose.yml 作成

適当なディレクトリに docker-compose.yml を作成する。

$ vi docker-compose.yml

GitHub - sameersbn/docker-redmine: Docker Image for Redmine

内容は上記にある docker-compose-mysql.yml とほぼ同じですが、少しだけ手を入れます。全体は以下の通り。

version: '2'

services:
  mysql:
    image: sameersbn/mysql:latest
    environment:
      - DB_USER=redmine
      - DB_PASS=password
      - DB_NAME=redmine_production
    volumes:
      - /srv/docker/redmine/mysql:/var/lib/mysql
  redmine:
    image: sameersbn/redmine:latest
    depends_on:
      - mysql
    environment:
      - TZ=Asia/Tokyo

      - DB_ADAPTER=mysql2
      - DB_HOST=mysql
      - DB_PORT=3306
      - DB_USER=redmine
      - DB_PASS=password
      - DB_NAME=redmine_production

      - REDMINE_PORT=10083
      - REDMINE_HTTPS=false
      - REDMINE_RELATIVE_URL_ROOT=/redmine
      - REDMINE_SECRET_TOKEN=

      - REDMINE_SUDO_MODE_ENABLED=false
      - REDMINE_SUDO_MODE_TIMEOUT=15

      - REDMINE_CONCURRENT_UPLOADS=2

      - REDMINE_BACKUP_SCHEDULE=
      - REDMINE_BACKUP_EXPIRY=
      - REDMINE_BACKUP_TIME=

      - SMTP_ENABLED=false
      - SMTP_METHOD=smtp
      - SMTP_DOMAIN=www.example.com
      - SMTP_HOST=smtp.gmail.com
      - SMTP_PORT=587
      - SMTP_USER=mailer@example.com
      - SMTP_PASS=password
      - SMTP_STARTTLS=true
      - SMTP_AUTHENTICATION=:login

      - IMAP_ENABLED=false
      - IMAP_HOST=imap.gmail.com
      - IMAP_PORT=993
      - IMAP_USER=mailer@example.com
      - IMAP_PASS=password
      - IMAP_SSL=true
      - IMAP_INTERVAL=30

    ports:
      - "10083:80"
    volumes:
      - /srv/docker/redmine/redmine:/home/redmine/data

実行

Docker Compose を実行して Redmine のコンテナを起動する。

$ docker-compose up -d # -d でバックグラウンド実行

10083 ポートで /redmine にアクセスすると Redmine の画面が表示される。

リバースプロキシ

前回インストールした Apache のリバースプロキシを使って、80 ポートの /redmine でアクセスできるようにする。

$ sudo -i # スーパーユーザーで実行
$ vi /etc/httpd/conf.modules.d/00-proxy.conf # 下記参照
$ exit # スーパーユーザーここまで
$ sudo service httpd restart

00-proxy.conf の設定内容は以下の通り。

ProxyRequests Off
ProxyPass /redmine http://127.0.0.1:10083/redmine
ProxyPassReverse /redmine http://127.0.0.1:10083/redmine

80 ポートでアクセスすると Redmine の画面が表示されるはず。admin / admin でログインできます。

まとめ

Docker Compose 便利。

JJUGナイトセミナー「緊急特集！Javaの無償版はなくならないぞ！」に行ってきた #jjug

Java メモ

JJUGナイトセミナー「Java SE 10 / JDK10 リリース特集」に行ってきました。簡単に所感をまとめます。

jjug.doorkeeper.jp

メモから抜粋。(資料が公開されたら貼っておきます)

JDK:新しいリリースモデル解説

www.slideshare.net

JDK8 までのリリースモデル

  • OpenJDK はソースコードを公開、バイナリ提供なし
  • オラクルは OpenJDK のソースコードにツール類を追加してバイナリ生成&提供
    • BCL
  • セキュリティアップデートはオラクルが開発
    • OpenJDK への同期は不完全
    • セキュリティアップデートにバグフィックスやたまに機能追加があったり
  • OpenJDK は Update Project が Update Release を提供している
  • これまでのリリースモデルだと開発完了した中小機能はリリース待ちの状態に

JDK9 以降のリリースモデル

  • OpenJDK コミュニティが開発してソースコードを公開
  • Java 11 では JFR や JMC が OpenJDK のソースコードに含まれる
  • OpenJDK では開発した機能が順次リリースされる
  • Oracle JDK はバージョンを固定して使いたいニーズに特化している
    • 3年に1度のリリース
    • 有償サポートは最低8年 (LTS)
  • アップデートリリースには脆弱性対策やバグFixが含まれる
    • 4半期ごと
  • OpenJDK バイナリは単一のソースコードで機能追加やメンテナンスが行われる
  • Oracle JDK は各バージョンごとにリポジトリが分かれる
  • バージョン番号は OpenJDK に合わせる
    • Oracle JDK 11 の次バージョンが 17 になる

  • 例えば、OpenJDK 13 あたりのタイミングで有償版に切り替えると Oracle JDK 11 時点の機能しか含まれない

  • Oracle Java Archive はそのまま残る

  • OpenJDK 側でも JDK9 以降のアーカイブ提供開始

  • Java SE 仕様の提案⇒定義⇒承認は JCP で進められる

  • OpenJDK は再配布可能なライセンスになっている

  • Deprecated の運用ルールはこれまで通り

    • 最短1年で機能が削除される可能性あり

  • Oracle JDK で11から17にアップデートするといきなり削除されている機能があるかもしれない

  • Oracle JDK 8 は2019/1までアップデートされる (個人利用に限り2020年末まで)

    • 企業内で使う場合は個人利用に含まれないので注意

あとで資料公開されるかもしれませんが、同様の内容は以下にあります。

JDKの新しいリリース・モデル、および提供ライセンスについて

OpenJDK開発の実態

適当に投げた質問がまさか上位に来るとは...。でも、普段聴けない話を聴くことができて面白かったです。

これまででいちばん胸熱なbugはどんなやつでしたか？

「コンパイラが落ちる系のバグ」「Project Lambda のときは毎週のように落ちていた」

いかにJavaのバージョンアップと付き合うべきか

docs.google.com

  • Java はライフサイクルが早くなっただけ
    • リリースのスピードが速くなって、EoL も早くなった
    • 有償化されるとか無償版がなくなるというのは認識誤り

Java バージョンアップについて

  • 広範囲に亘って再テストが必要になる > テストするのは当たり前
    • バージョンアップ戦略を事前に決める (予算確保の意味で)
    • テスト自動化でコスト削減を図る
  • 周辺ライブラリやフレームワークの対応
    • Java のバージョンを上げるとフレームワークのバージョンを上げる必要があるかも
    • 周辺ライブラリの対応を待っている間にサポート期間が過ぎてしまうかも
    • 対応しないライブラリは切る、別のライブラリに乗り換える
  • AdoptOpenJDK
    • 最近、スポンサーに Microsoft が追加された
    • Java11 以降、3年ごとに4年間のLTSを提供する
    • 移行期間として1年間の猶予があるということ
  • LTS に追従、バージョン固定、に6ヶ月リリースに追従という選択肢が増えただけと言える

事前に日経xTECHのひとを呼んでインタビューをしていたとのこと。素晴らしい...。

バージョンアップ戦略はとても重要だなと思います。とは言え、6ヶ月リリースに追従するのはちょっと厳しいと思うし、バージョン固定はアレとなると、LTS に追従することになるかと思いますが、無償版を使うつもりならいよいよ本格的に AdoptOpenJDK を調べておいた方がよいのかなという印象。

以前、きしださんのエントリにいくつか載ってましたが、このあたりの詳細とか比較なんかを聴いてみたいです。

qiita.com

Vue.js で ToDo アプリを作る (Firebase Realtime Database 編)

Vue.js PWA Firebase

前回の続き

Vue.js で ToDo アプリを作る - kntmr-blog

前回作成した ToDo アプリはデータを LocalStorage に保存していましたが、今回は Firebase Realtime Database に保存するようにしました。また、Vuex の Plugins は使わず、mutations のところで state を書き換えるついでに Firebase の API を呼び出しています。が、これでいいのかどうかは微妙なところ...。

あと、他の端末が Realtime Database のデータを変更したことを検知できるようにコールバックを実装しています。(VueFire 使えばもっと簡単にできると思いますが、今回はあえて使わないことに...)

ソースコードはこちら。

github.com

参考にしたドキュメントは以下。

以下、備忘録。

> npm install firebase --save

Firebase の初期化は src/main.js で実施。

import firebase from 'firebase/app'
import 'firebase/database'

var config = {
  apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  authDomain: "APPNAME.firebaseapp.com",
  databaseURL: "https://APPNAME.firebaseio.com",
  projectId: "APPNAME",
  storageBucket: "APPNAME.appspot.com",
  messagingSenderId: "xxxxxxxxxxxx"
}
firebase.initializeApp(config)

import firebase from 'firebase' だけだとコンソールに警告が出るようです。必要なものだけ import しましょうということっぽい。今回は Realtime Database だけ使うので以下のようにする。

import firebase from 'firebase/app'
import 'firebase/database'

ビルド & デプロイ

ビルドする。

> npm run build

Firebase プロジェクトとして初期化する。

> firebase login # ログイン
> firebase init
? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choi
ces. Hosting: Configure and deploy Firebase Hosting sites
? Select a default Firebase project for this directory: APPNAME # 既存のプロジェクトを選択
? What do you want to use as your public directory? dist # npm run build で dist に出力されるため、dist を指定する
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? File dist/index.html already exists. Overwrite? No # index.html は上書きしない

Firebase にデプロイする。

> firebase deploy

Android 端末でアクセスすると「ホーム画面に追加」が表示されます。初回アクセスでは表示されません。Android / iOS (Safari) ではオフラインでも動作します。また、Realtime Database の機能で端末間でデータが同期されます。オフラインで操作すると、次回オンラインになったときにデータが同期されます。すごい！

まとめ

もともと PWA について調べるつもりで始めましたが、最初に vue init pwa todo-app した以外は普通に Web アプリを作る感じになってしまいました。まだ、PWA や Service Worker あたりの理解が浅いので引き続き要学習。しかし、Realtime Database なかなか便利ですね。

AWS の10分間チュートリアルで EC2 インスタンスを起動してから HTTP アクセスするまで

AWS

試してみたついでに備忘録。

EC2 インスタンス作成&起動

EC2 インスタンスを作成して起動。10分間チュートリアルは以下。便利。

aws.amazon.com

httpd インストール

EC2 インスタンスに ssh でアクセスして、httpd をインストールする。

$ sudo yum install -y httpd24
$ sudo service httpd start

セキュリティグループ編集

デフォルトでは ssh (ポート20) のインバウンドしか許可されていない。該当インスタンスを選択して、セキュリティグループの launch-wizard-1 をクリック。

ここで、セキュリティグループを編集する。

  • アクション > インバウンドのルールの編集
  • ルールの追加
  • タイプ: HTTP を指定して保存 (必要に応じてソースを指定)

パブリック DNS かパブリック IP で HTTP アクセスすると、httpd のページが表示されるはず。

おまけ

Node.js / npm をインストールする。今回は nvm を使う。

Node Version Manager - GitHub

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
$ source ~/.bashrc
$ nvm ls-remote # 最新の安定版を確認してインストール
$ nvm install v8.11.3
$ node -v
v8.11.3
$ npm -v
5.6.0

GitBook on Windows

GitBook

GitBook の導入手順などをメモ。基本的なところはドキュメントに書いてありますが。

V2 changes - GitBook Documentation

前提

node と npm のバージョンは以下の通り。

> node -v
v8.11.2
> npm -v
5.6.0

尚、手元の環境が Windows だからなのか、いろいろと思った通りに動作しないところがあります。が、GitHub の issue にワークアラウンドが載っています。一応、PR があるはずなんだけど、マージはされてないっぽい？開発があまり活発じゃないんだろうか...。

インストール

gitbook-cli をインストール。初回の gitbook 実行時にコマンドがインストールされます。

> npm install -g gitbook-cli
> gitbook --version
CLI version: 2.3.2
GitBook version: 3.2.3

プロジェクト作成

適当にプロジェクトフォルダを作成して初期化。

> mkdir sample
> cd sample
> gitbook init

プラグインインストール

今回は次のプラグインを使っています。

----- (2018/06/11 追記) -----
当初、gitbook-plugin-puml を使おうと思ってたのですが、gitbook-plugin-uml を使うことにしました。事前に以下の手順が必要になります。

  • Graphviz インストール
  • 環境変数 GRAPHVIZ_DOT を設定 (dot.exe ファイルのパスを設定する)

また、手元の環境では、gitbook-plugin-uml のインストールでコケるので、git config --global url."https://".insteadOf git:// を実施。(パッケージをインストールしたら戻すこと)
(参考) https://stackoverflow.com/questions/31744852/npm-install-giving-error-while-accessing-git-url
----- (追記ここまで) -----

まずは、npm パッケージをインストール。

> npm install gitbook-plugin-uml
> npm install gitbook-plugin-livereload

プロジェクトのルートに book.json を作成します。

{
  "plugins": [
    "-sharing",
    "uml",
    "livereload"
  ],
  "pluginsConfig": {
    "uml": {
      "charset" : "UTF-8"
    }
  }
}

プラグインインストール。

> gitbook install

ビルド

以下のコマンドでビルドします。プロジェクトのルートに _book が生成されるので、これを Web サーバーにデプロイします。

※ Windows 環境ではエラーになることがあります。ワークアラウンドは下記参照。

> gitbook build

ローカルで確認する場合は以下のコマンドを実行します。ローカルでサーバーが起動して localhost:4000 にアクセスすると画面が表示されます。また、ローカルでファイルを編集するとライブリロードされます。

※ Windows 環境ではエラーになることがあります。ワークアラウンドは下記参照。

> gitbook serve

PDF 出力

PDF 出力には ebook-convert というコマンドが使われるようです。このコマンドを使えるようにするには Calibre をインストールします。

calibre - Download for Windows

以下のコマンドで PDF を出力します。

> gitbook pdf ./ hoge.pdf

HTML / PDF のスタイルを変更する

book.json を編集します。

{
  "plugins": [
    "-sharing",
    "uml",
    "livereload"
  ],
  "pluginsConfig": {
    "uml": {
      "charset" : "UTF-8"
    }
  },
  "styles": {
    "website": "styles/website.css",
    "pdf": "styles/pdf.css"
  }
}

新しく css ファイルを作成して、カスタマイズするスタイルを定義します。HTML は Chrome の開発者ツールで class などを特定できますが、PDF のスタイルはちょっと分かり辛いかも。おそらく以下がオリジナルのファイルなのでこれを参考にする。

~/.gitbook/versions/3.2.3/node_modules/gitbook-plugin-theme-default/_assets/ebook/pdf.css

ワークアラウンドをまとめます。

gitbook serve と gitbook build でエラーになる場合

~/.gitbook/versions/3.2.3/lib/output/website/copyPluginAssets.js を以下のように編集します。

return fs.copyDir(
    assetsFolder,
    assetOutputFolder,
    {
        deleteFirst: false,
        overwrite: true,
        confirm: true // これを false に書き換える
    }
);

(参考) https://github.com/GitbookIO/gitbook/issues/1309#issuecomment-273584516

また、旧バージョンの gitbook ではエラーになりません。ただし、この方法だと検索機能が利用できなくなります。

旧バージョンをインストール。

> gitbook fetch 2.6.7
> gitbook -v 2.6.7

旧バージョンを指定してコマンドを実行。

> gitbook serve --gitbook=2.6.7
> gitbook build --gitbook=2.6.7

(参考) https://github.com/GitbookIO/gitbook/issues/1379#issuecomment-303628878

ライブリロードでエラーになる場合

Windows 環境ではライブリロード時にサーバーが停止することがあります。以下の手順で回避できます。

  1. gitbook serve を実行
  2. _book フォルダを削除する

以降、ファイル編集後、正常にサーバーが再起動してリロードされるようになります。

(参考) https://github.com/GitbookIO/gitbook/issues/1379#issuecomment-320579569

gitbook-plugin-puml で日本語が文字化ける場合

gitbook-plugin-puml で日本語を使うと文字化けして表示されます。これは、plantuml-encoder の 1.2.4 で修正されているようです。が、gitbook-plugin-puml の package.json が plantuml-encoder@1.2.3 になっています。(2018/06/08 時点では 1.2.5 が最新の模様)

(参考) https://github.com/markushedvall/plantuml-encoder/issues/4

<プロジェクトフォルダ>/node_modules/gitbook-plugin-puml/package.json を編集します。

"dependencies": {
  "plantuml-encoder": "1.2.3" // これを 1.2.5 に変更
},

<プロジェクトフォルダ>/node_modules/gitbook-plugin-puml/ でコマンドプロンプトを起動。

> npm install

これで gitbook build or gitbook serve すると正しく日本語が出力されるようになります。

Vue.js で ToDo アプリを作る

Vue.js PWA

以前、PWA の学習を兼ねて、Firebase にデプロイしたアプリを PWA 化してみる計画を立てたのですが、対象のアプリがイマイチなので、その代わりに Vue.js で ToDo アプリを作りました。

今のところ ToDo のデータは LocalStorage に保存するようにしています。次回は Firebase Realtime Database に保存するようにしてみようかと。で、PWA のアプリとして Firebase にデプロイ。

ソースコードはこちら。

github.com

以下、備忘録。

環境構築

> vue init pwa todo-app
> cd todo-app
> npm install
> npm run dev

Vuex Plugins

ToDo データの永続化は Vuex の Plugins の仕組みを利用して、mutations に commit するタイミングで LocalStorage に保存する。

Vuex | プラグイン

あと、前からちょっと気になってたけど、actions に dispatch するタイミングでフックする仕組みはないだろうか...。

次にやること

Vuex の Plugins のところで、LocalStorage に保存しているところを Firebase Realtime Database を使うように差し替えられないか試してみる。