Let's Encrypt で HTTPS な nginx 構築
おおまかな流れ
nginx を HTTPS 対応するおまかな流れは以下の通りです。
ちなみに、Let's Encript のサイトはこちらです。
また、日本語ポータルサイトもあるので、適宜参考にすること。
Certbot のインストール
基本的には、Certbot 本家サイトに従えばインストールできます。
自分のサイトは、OS：Ubuntu 16.04(Xenial) 、Webサーバ：nginx である。この場合、インストール手順は下記のとおり（本家サイトの説明通り）。
$ sudo apt-get update $ sudo apt-get install software-properties-common $ sudo add-apt-repository ppa:certbot/certbot $ sudo apt-get update $ sudo apt-get install python-certbot-nginx
証明書取得
ここからは、Certbot 本家のサイトに書いてあるのとちょっと違う。なぜなら、nginxサーバが Dockerコンテナの入っていたりゴニュゴニュしているためです。*1
今回は、3つのサーバに対応した証明書を発行してもらいます。具体的には、"-d" オプションで複数のサーバ名を指定すればOK。これについては、以下のサイトが参考になります。
また、"--standalone" オプションを指定。これにより、Certbot クライアントに内蔵されている簡易的なウェブサーバが機能が一時的に使われるため、自分サイトの nginx は一旦停止しておく必要があります。
ともあれ、実行したコマンドのログを貼り付けておきます。
### 証明書の取得 ### $ sudo certbot certonly --standalone -d my-domain.jp -d www.my-domain.jp -d app.my-domain.jp ### メールアドレスの指定（初回のみらしい） ### Saving debug log to /var/log/letsencrypt/letsencrypt.log Enter email address (used for urgent renewal and security notices) (Enter 'c' to cancel):mysccount@my-domain.jp ### なんか同意する ### ------------------------------------------------------------------------------- Please read the Terms of Service at https://letsencrypt.org/documents/LE-SA-v1.1.1-August-1-2016.pdf. You must agree in order to register with the ACME server at https://acme-v01.api.letsencrypt.org/directory ------------------------------------------------------------------------------- (A)gree/(C)ancel: A ------------------------------------------------------------------------------- Would you be willing to share your email address with the Electronic Frontier Foundation, a founding partner of the Let's Encrypt project and the non-profit organization that develops Certbot? We'd like to send you email about EFF and our work to encrypt the web, protect its users and defend digital rights. ------------------------------------------------------------------------------- (Y)es/(N)o: N ### 証明書が発行される！！ ### Obtaining a new certificate Performing the following challenges: tls-sni-01 challenge for my-domain.jp tls-sni-01 challenge for www.my-domain.jp tls-sni-01 challenge for app.my-domain.jp Waiting for verification... Cleaning up challenges IMPORTANT NOTES: - Congratulations! Your certificate and chain have been saved at /etc/letsencrypt/live/my-domain.jp/fullchain.pem. Your cert will expire on 2017-11-11. To obtain a new or tweaked version of this certificate in the future, simply run certbot again. To non-interactively renew *all* of your certificates, run "certbot renew" - Your account credentials have been saved in your Certbot configuration directory at /etc/letsencrypt. You should make a secure backup of this folder now. This configuration directory will also contain certificates and private keys obtained by Certbot so making regular backups of this folder is ideal. - If you like Certbot, please consider supporting our work by: Donating to ISRG / Let's Encrypt: https://letsencrypt.org/donate Donating to EFF: https://eff.org/donate-le
ここまで無事に成功したら、"/etc/letsencript/live/[domein name]/" の下に証明書ファイルが生成されているはず。 ちなみに、証明書はいくつかのファイルがあり、それぞれシンボリックリンクされている。
# cd /etc/letsencrypt/live/my-domain.jp # ls -l lrwxrwxrwx 1 root root 44 Aug 13 12:57 cert.pem -> ../../archive/my-domain.jp/cert1.pem lrwxrwxrwx 1 root root 45 Aug 13 12:57 chain.pem -> ../../archive/my-domain.jp/chain1.pem lrwxrwxrwx 1 root root 49 Aug 13 12:57 fullchain.pem -> ../../archive/my-domain.jp/fullchain1.pem lrwxrwxrwx 1 root root 47 Aug 13 12:57 privkey.pem -> ../../archive/my-domain.jp/privkey1.pem -rw-r--r-- 1 root root 543 Aug 13 12:57 README
nginx 設定
証明書を入手できたので、これを nginx に仕込みます。
具体的には、次の2つを設定すれば OK です。
ということで、以下のような感じになりました。
server {
listen 443 ssl;
server_name my-domain.jp www.my-domain.jp;
ssl_certificate /etc/letsencrypt/live/my-domain.jp/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/my-domain.jp/privkey.pem;
access_log /var/log/nginx/default.ssl.access.log main;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
error_page 404 /404.html;
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
以上です。さらに、80番ポートでアクセスされた場合は、443ポートにリダイレクトするような設定を追加するとバッチリかと思います。
今後の運用
Let's Encript 証明書の有効期限は 90日間なので、今後は、90日ごとに更新手続きを行う必要があります。こちらについても、"Certbot" を使って簡単に実行できますので、そのころまたレポートを追加したいと思います。
2017年10月29日 追記： 証明書を更新しました
この記事を書いた時から3ヶ月くらい経ったので、Let's encript 証明書を更新しました。更新手順はざっくり以下の通りです。
- Nginx などwebサーバを止める
- Let's encript 証明書を更新
- Nginx などwebサーバを再起動
ここで、"2. Let's encript 証明書を更新" は次のコマンドを投入するだけでOKです。
$ sudo certbot renew ### コマンドを投入するといろいろ処理メッセージが出ます Saving debug log to /var/log/letsencrypt/letsencrypt.log ------------------------------------------------------------------------------- Processing /etc/letsencrypt/renewal/my-domain.jp.conf ------------------------------------------------------------------------------- Cert is due for renewal, auto-renewing... Renewing an existing certificate Performing the following challenges: tls-sni-01 challenge for my-domain.jp tls-sni-01 challenge for www.my-domain.jp tls-sni-01 challenge for app.my-domain.jp Waiting for verification... Cleaning up challenges ------------------------------------------------------------------------------- new certificate deployed without reload, fullchain is /etc/letsencrypt/live/my-domain.jp/fullchain.pem ------------------------------------------------------------------------------- Congratulations, all renewals succeeded. The following certs have been renewed: /etc/letsencrypt/live/my-domain.jp/fullchain.pem (success)
以上で完了です。とてもシンプルです。
次回からは、自動的に更新処理が実行されるよう cron に登録するといいですね。
*1:ノーマルな nginx サーバであれば、本家 Certbot のサイトに書いてあるように、"sudo certbot --nginx" もしくは "sudo certbot --nginx certonly" とやれば、自サイトの nginx 設定を見ながらいい感じに証明書を発行してくれるようです。
node express + react 開発環境作成手順（自分メモ）
サーバアプリは “node” + “express"、クライアントアプリには "React” を使用した場合の開発環境を構築した時の手順を記載します。あくまでも自分用メモです。
概要
大体の構成
サーバ：
”node" ＋ “express"。クライアント：
“React"。クライアントのビルドに "webpack"。JSトランスパイラは "babel"。その他 CSS のビルドに "style-loader"、また、ビルドしたReact JSファイルを読み込む index.htmlを生成してくれるプラグインには "html-webpack-plugin” を利用する。
大まかな流れ
- node + express-generator をインストール
- express 開発環境を作成
- react インストール
- webpack 導入
- babel 導入
- style-loader 導入
- html-webpack-plugin 導入
サーバアプリ開発環境の構築
1) node + express-generator をインストール
最初に node をインストール。nodebrew を使用すると吉。
続いて、express-generator をグローバルにインストール。
$ npm install express-generator -g
2) express 開発環境を構築
express-generator でサーバアプリ開発環境の雛形を作成。
今回は、HTMLテンプレートエンジンに “pug” を指定。（実際は使用しないかもしれないけど一応あると便利かも）
$ express [app-name] --view=pug
これで、[app-name] ディレクトリ配下に、node + express 開発環境の雛形が生成され、最低限のサーバアプリ開発環境ができた。あとは、自分の必要に応じて、".gitignore" などを作ったり、EsLint のセットアップをすること。
クライアントアプリ開発環境を追加する
3) reacインストール
$ npm install --save react react-dom
4) webpack 導入
$ npm install --save-dev webpack
5) Babel を導入
# webpack から babel を利用する場合の基本モジュール $ npm install --save-dev babel-loader babel-core # React をとトランスパイルするモジュール $ npm install --save-dev babel-cli babel-preset-react # Es2015 をトランスパイルするためのもの $ npm install --save-dev babel-preset-es2015
babel の設定ファイル “.babel.rc” を作成
$ echo '{ "presets": ["react", "es2015"] }' > .babelrc
$ cat .babelrc
{ "presets": ["react", "es2015"] }
ここで、babel で js をトランスパイルするための webpack 設定をおこなう。
$ vim webpack.config.js
ここまでの webpack.config.js の中身は次のとおり。
var path = require('path');
module.exports = {
entry: './client/src/app.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'public')
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
}
};
6) style-loader 導入
$ npm install --save css-loader
webpack.config.js に下記の loader を追加。
module: { { test: /\.css$/, exclude: /node_modules/, loader: ['style-loader', 'css-loader'], }, ], },
7) html-webpack-plugin 導入
$ npm install -save-dev html-webpack-plugin
index.html の元となるテンプレ “client/template/index.ejs” を作成。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <div id='app'></div> </body> </html>
あとは、webpack.config.js に html-webpack-plugin の設定を追加する。
plugins: [ new HtmlWebpackPlugin({ title: 'ngzm uploader', template: './client/template/index.ejs', }), ],
まとめ
最終的な webpack.config.js
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './client/src/App.jsx', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'public'), }, devtool: 'inline-source-map', module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', }, { test: /\.css$/, exclude: /node_modules/, loader: ['style-loader', 'css-loader'], }, ], }, plugins: [ new HtmlWebpackPlugin({ title: 'ngzm uploader', template: './client/template/index.ejs', }), ], resolve: { extensions: ['.js', '.jsx'], }, };
なお今回は、"webpack-dev-server" は利用していませんが、これも便利そうなので次回は導入したいと思います。
参考
- Installation - React
- Babel · The compiler for writing next generation JavaScript
- React x Webpackプロジェクトの雛形を作る
- 最新版で学ぶwebpack 3入門 - JavaScript開発で人気のバンドルツール - ICS MEDIA
- Using the HTML Webpack Plugin for generating HTML files
以上。
Karabiner-Elements - 左右commandキー単独をかな英数キーにGUIで設定できるようになってた！
はじめに
MacOS Sierra になってそれまでお世話になった Karabiner さんが動かなくなっていろいろ試行錯誤がありました。本ブログでも、2016年12月に、当時最もナイスな方法と思われた wwwjfy さんの「Stand Alone Key」PR版を使う方法をご紹介したりしました。
そしてついに、本家 Karabiner-Elements で 左右Commandキー単独でかな英数切り替えがサポートされたということで、さっそく試してみましたよ。
Karabiner-Elements のセットアップ方法とか
今回インストールしたのは Karabiner-Elements 0.91.5 です。
本家サイトの Usage にて、大変丁寧なインストール方法や設定方法が書いてあるため、基本的なセットアップ作業はそれに従えばぜんぜん大丈夫と思います。
待望の機能は「Complex Modifications」というものです。これにより、複数キーの組み合わせをあるキーにマッピングしたり、逆に、あるキーを複数のキーにマッピングする Many to Many Mapping であるとか、キーを単独で押した場合だけ、別のキーに割り当てる Stand Alone Key の機能が使えるようになりました。
なるほど、これで「左右Command」キーを単独で押した場合に「かな」や「英数」にマッピングすることができるわけですね。
しかも試してみて分かったのですが、全てGUI画面で設定できるようになっていました！
とっても簡単ですね。ありがたや。
私の設定メモ
参考までに、私が行った大まかな設定内容をメモっておきます。
1. キーボードの種類を設定
私は日本語キーボードを使用しているので、Karabiner-Elements の Virtual Keyboard 画面で、キーボードタイプを JIS に変更します。なお Karabiner-Elementsデフォルトは ANSI （英語）キーボードです。
2. 英数キーを左Commandキーに変換
私は「英数」キーと「左Command」 キーを良く打ち間違えるのでこの設定をします。「そんなの間違えないよ！」「だせえ」とお思いの方々は、本設定は不要です。これは Karabiner-Elements の Simple Modifications 画面で次のように設定します。
3. Command キー単独で日本語切り替え
この設定が今回のメインです。Karabiner-Elements の Complex Modifications 画面で、あらかじめ用意された Complex Modifications ルールから適当なものを選択するだけで OKです！
左下の「Add Rule」ボタンをおしてあらかじめ用意された Complex Modifications ルールを表示します。
あいにく Example にはCommandキーと日本語切り替えのものは無かったので、上の「Import more rules from the Internet」から Karabiner-Elements のサイトに用意されているルール集から探してみます。
すると「For Japanese （日本語環境向けの設定）コマンドキーを単体で押したときに、英数・かなキーを送信する。（左コマンドキーは英数、右コマンドキーはかな）」というルールがありましたので、こいつをインポートします。
これで Karabiner-Elements に インポートしたルールが表示されます。「Enable」ボタンを押してさっさと有効にしちゃいます。
成功です。コマンドキーを単体で押したときに、英数・かなキーを送信する、のルールが有効になりました！
これで設定は完了です。無茶簡単ですね。キーボード入力してみて問題がないかどうか試してみてください。
4. Karabiner-Elements 設定ファイル
Karabiner-Elements の設定内容は、~/.config/karabiner/karabiner.json というファイルに保存されます。
参考までに、今回設定した内容が、どのように karabiner.json に定義されているか？ ということで、以下にその内容を記載して終わりです。
{ "global": { "check_for_updates_on_startup": true, "show_in_menu_bar": true, "show_profile_name_in_menu_bar": false }, "profiles": [ { "complex_modifications": { "parameters": { "basic.to_if_alone_timeout_milliseconds": 1000 }, "rules": [ { "description": "コマンドキーを単体で押したときに、英数・かなキーを送信する。（左コマンドキーは英数、右コマンドキーはかな）", "manipulators": [ { "from": { "key_code": "left_command", "modifiers": { "optional": [ "any" ] } }, "to": [ { "key_code": "left_command" } ], "to_if_alone": [ { "key_code": "japanese_eisuu" } ], "type": "basic" }, { "from": { "key_code": "right_command", "modifiers": { "optional": [ "any" ] } }, "to": [ { "key_code": "right_command" } ], "to_if_alone": [ { "key_code": "japanese_kana" } ], "type": "basic" } ] } ] }, "devices": [], "fn_function_keys": { "f1": "display_brightness_decrement", "f10": "mute", "f11": "volume_decrement", "f12": "volume_increment", "f2": "display_brightness_increment", "f3": "mission_control", "f4": "launchpad", "f5": "illumination_decrement", "f6": "illumination_increment", "f7": "rewind", "f8": "play_or_pause", "f9": "fastforward" }, "name": "Default profile", "selected": true, "simple_modifications": { "japanese_eisuu": "left_command" }, "virtual_hid_keyboard": { "caps_lock_delay_milliseconds": 0, "keyboard_type": "jis" } } ] }
15年前に作ったアプリを React + Sinatra でリメイクしました
昔々、、ひょんなことから作った人工無脳アプリを、最近の Web アプリ風に作り直してみました！
ということで、この開発内容を以下のスライドにまとめましたので、よかったらご覧ください。
www.slideshare.net
せっかくスライド作ったので、いつもお世話になっている kawasaki.rb で LT させてもらいました。
kawasaki.rb の皆さんありがとうございます。
React Router v4 でルーティング先の component に Props を渡す方法
「React Router v4 でルーティング先の component に Props を渡す方法」について調査したので記事にします。
基本的なReact Router v4 の基本的なルーティング
React Router v4 の基本的なルーティングは次のような感じでコーディングします。
import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; ReactDOM.render(( <BrowserRouter> <AppFrame /> </BrowserRouter> ), document.getElementById('root'), ); class AppFrame extends Component { render() { return ( <main> <Switch> <Route path='/login' component={Login} /> <Route path='/getbook' component={GetBooks} /> <Route path='/addbook' component={Addbook} /> </Switch> </main> ); } }
今回は “component={xxxx}” で起動する React component に props を渡す方法を考えます。
React component に props を渡す
変数を props として渡す方法
上記 /getbook の URI でルーティングされる GetBook component に、ある変数（ここでは書籍ID(bookID)とします） を props として渡したい！となった場合、、その時は、以下のように書くと良いでしょう。
class AppFrame extends Component { render() { this.bookId = 2; // とりあえず仮に書籍ID = 2 と設定 return ( <main> <Switch> <Route path='/login' component={Login} /> // GetBook component に、bookID を props として渡します <Route path='/getbook' render={props => <GetBook bookId={this.bookId} {...props} />} /> <Route path='/addbook' component={Addbook} /> </Switch> </main> ); } }
“component” ではなく “render” を使うところがミソですね。
function を props として渡す方法
続いて、/login の URI でルーティングされる Login component に、認証処理を行う function auth() を props として渡たしたい！となったらどうするか？
同じく render を使用して渡してあげれば大丈夫です。
class AppFrame extends Component { auth(userInfo) { // 何かの認証処理 } render() { return ( <main> <Switch> // Login component に、認証処理を行う function auth() を props として渡します <Route path='/login' render={props => <Login onSubmit={userinfo => this.auth(userinfo)} {...props} />} /> <Route path='/getbook' component={GetBooks} /> <Route path='/addbook' component={Addbook} /> </Switch> </main> ); } }
参考となった情報
いろいろ調査しましたが、特に、下記の Github issue が参考になりました。様々なアプローチが議論されており見るだけで勉強になります。
まとめ？
最近、React Router が V4 になっていろいろ変わって大変だ！との嘆きを耳にしました。ですが、React 初心者である私は「へー」とか「ふーん」と実感も伴わずに聞き流していましたが、最近、実際にコードを書く段になって「大変」の意味がわかりました。
今回の調査もそうでしたが、とにかくまだ情報が少なく、あっても英語なことが多いので、どうしても時間がかかってしまします。また、v4に関する情報かどうかを見極めるのも（特に初心者は v2 や v3 の情報と混同しがち）以外に大変だったりしました。
ということで「英語は重要だ！」というまとめを以って終了です。
