Tag: Web

タグ・月別アーカイブ

Let's encrypt + nginx で momo 環境を https 化した話

chrome では WebXR Device API は https でないと有効にならないようなので、さっくりと試してみた。

対象は WebRTC Native Client Momo の提供する、test モードでの http, WebSocket です。

作業内容としては、証明書を取得する+nginxでリバプロする、その二点だけです。

証明書の取得

みんな大好き Let's encrypt です。

いやもう大好きです。期限が短いから自動更新せざるを得ないし、自動更新作ってしまえば運用楽だし。無料だし。

certbot あたりが有名どころですが、lego を使いました。
環境は閉じている方が楽なので Raspber Pi Zero で動作させます。
そのため Mac からクロスコンパイルします。

$ git clone https://github.com/go-acme/lego.git
$ cd lego
$ export GOOS=linux
$ export GOARCH=arm
$ export GOARM=6
$ make build

strip するのが面倒なので、予め strip しておきましょう。

--- a/Makefile
+++ b/Makefile
@@ -23,7 +23,7 @@ clean:

 build: clean
        @echo Version: $(VERSION)
-       go build -v -ldflags '-X "main.version=${VERSION}"' -o ${BIN_OUTPUT} ${MAIN_DIRECTORY}
+       go build -v -ldflags '-s -w -X "main.version=${VERSION}"' -o ${BIN_OUTPUT} ${MAIN_DIRECTORY}

 image:
        @echo Version: $(VERSION)

今回は DNS サーバーは AWS/Route53 を使いました。

クラウド破産しないように、Route53 用の IAM を作成しておきましょう。

export AWS_ACCESS_KEY_ID=AXXXXX
export AWS_SECRET_ACCESS_KEY=XXXXX
export AWS_HOSTED_ZONE_ID=XXXXX
export AWS_REGION=us-east-1

# 初期化
./lego --accept-tos --path=./letsencrypt --email="mail@address" --dns="route53" --domains="*.foobar.com" run
# 更新
./lego --accept-tos --path=./letsencrypt --email="mail@address" --dns="route53" --domains="*.foobar.com" renew --days 30

実行に成功したら、上の例では ./letsencrypt/certificates/ 以下に証明書が保存されています。

一般的には cron, CronJob で実行したりとか、コンテナの中に入れたりとか、renew したら Message 投げるとかすればいいんじゃないですかね。

今回はロボ用なのであまり考えません。

nginx の設定

みんな大好きかもしれない nginx でのリーバスプロキシです。wss も対応していてよかった。

/etc/nginx/nginx.conf

events {
  worker_connections 768;
}

http {
  upstream momo {
    server localhost:8000;
  }

  map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
  }

  server {
    listen       443;
    server_name  xxx.foobar.com;

    ssl on;
    ssl_certificate /xxx/letsencrypt/certificates/xxx.crt;
    ssl_certificate_key /xxx/letsencrypt/certificates/xxx.key;

    access_log /dev/null;
    error_log /dev/null;

    location /ws {
      proxy_pass http://momo;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
      proxy_read_timeout 86400;
    }

    location / {
      proxy_pass http://momo;
    }
  }
}

上で取得した証明書を使います。server_name に対応する Route53 のエントリは手動か自動かで作っておきます。

おわりに

無事 Raspberry pi zero 上に https でアクセスできるようになりました!

lego repository にある Dockerfile を少々改変し、QNAP/docker-compose 用の環境もついでに作りました。こちら

Github Pages + SPA で Google Index をめぐる戦い

SPA化

標題そのものは各所のドキュメントで問題なく行えました。

blog は Markdown を json でまとめて、SPA 側で html にレンダリングしています。しかし、めんどい。

Google Search Index

atom.xml

blog 部分は、md から json 化して index を作っているので、index を作るときについでに atom.xml を作成。

sitemap.xml

面倒なので、SPA を自前 crawler で適当になめて sitemap.xml を作成。puppeteer とても良い。

https://github.com/Bugfire/create_sitemap に自分用の設定で適当に置いてあります。

Hash based router

最初は Hash based router (http://foobar.com/#/hoge/foo みたいなやつ)を使っていましたが、Hash だけ別の場合は Google 様は同じ URL とみなすので、全ページ同じ URL となり index されませんでした。

Push state router

しょうがないので普通の router を使う。

1. 404 に index.html を置く

404.html に index.html をおいたら、全てのアクセスが一個のファイルで動くじゃん俺天才、と思ってやってみましたが、動作は
しましたが、status 404 の場合は一切 index されないという悲しい結果に。

2. 404 から index.html?url 経由で開く

ちょっと調べた感じでは、これでいけるとありましたが、自分は index されませんでした。

3. あらゆる全ての箇所に index.html を置く

大変bakaです。sitemap に存在する全ての URL に index.html をコピー。いいんです、index.html はたったの 2616 バイトなんです。sitemap がとても役に立った、いやっほ!?

4. おまけ

Github Pages は、
http://foobar.com/XXX/YYY => XXX/YYY.html
http://foobar.com/XXX/YYY/ => XXX/YYY/index.html
と区別をしよう!

React

SPA

長いお休みをいただいているので、練習がてら、このサイト(Bugfire.dev)を React で SPA/PWA 化しました。

Page は gh-pages でホストをして、Blog は Markdown にして、index と記事を json でホストして取りに行くようにしました。

Redux/Flux 的なことは Unity や Vue.js で少しかじりましたが、今回は端折りました。
というか色々端折っても三日かかりました、難しい。

TODO

  • Year/Month/Tag で絞り込むUI

  • Android でアイコンが丸くならない、困った。

    "purpose": "maskable" で良いとの記事を見たが動かない。
    十分透過な画像を食わせると良いとは読んだけど、それやると iOS が変になりそう。

  • Markdown (Code highlight)

  • atom.xml

  • sitemap.xml

10/1 追記

PWA は色々おかしい(難しい)ので serviceWorker を止めました。MarkDown も single back-quote が div 要素になったり、普通に hatena blog や qiita にかけば良いのでは?、と頭をよぎってしまうので、あまり時間をかけないようにしたい(自戒)。

自分のためのコードを書くのは楽しいですけどね。

Hexoのインストール

ふと思い立って、Github pages を使って Blog を作ってみた。
環境は何でもよかったが、nodejs ベースの Hexo を使ってみることにしました。

nvm/nodejs のインストール

すでにインストールされていたnodejsが0.12だったので、ついでにnvmをインストール。

$ git clone git://github.com/creationix/nvm.git ~/.nvm

.profile に1行追加

$ echo 'if [[ -s ~/.nvm/nvm.sh ]] ; then source ~/.nvm/nvm.sh ; fi' >> ~/.bash_profile 
$ source ~/.bash_profile 

バージョンは適当に選択

$ nvm --version
0.33.1
$ nvm ls-remote
(いっぱい)
$ nvm install v5.12.0
$ node --version
v5.12.0

Hexo のインストール

npm install --save hexo

Blog の作成

$ ./node\_modules/hexo/bin/hexo init blog
$ cd blog
$ npm install

Theme の fork

一応。github から landscape を fork しておく。

Theme の submodule 化

$ cd themes/
$ git submodule add https://github.com/bugfire/hexo-theme-landscape.git landscape