haze_page
↑これ.
フロントエンド(主にBootstrap) +GCP+Webページの基本構築 あたりの勉強がてら作ってみた.
とりあえずページだけ用意した状態なので「nya-n.」しか書かれていないが, これから少しずつレベルアップさせていく予定.
やったこと
Google Cloud Platformでサーバを建てる
Compute Engineを使う.
- OS: CentOS7
- マシンタイプ: g1-small
- zone: asia-northeast1-b (=東京リージョン)
「作成」ボタンをポチれば勝手に立ち上がってくれる. 素晴らしいですね.
nginx と Bootstrapの用意
nginx
sudo yum -y install nginx
nginx.conf のルートディレクトリの設定とか80番ポート開けるとか
Bootstrap
getbootstrap.com
最近4.0.0が安定版になったとかいう話を聞いたので4.0.0を入れる
js, cssディレクトリをルートディレクトリとかに置いて, index.htmlのlinkを修正する.
ひとまず表示確認.
ドメイン名の取得と名前解決
ドメイン取るならお名前.com｜ドメイン取得 最安値 1円！
考えるのが面倒だったので, ドメイン名はGMOのお名前.comを使った.
.tokyo ドメインは年間99円( 税込107円 )だった. 安い.
Free Dynamic DNS (DDNS) for Home Server and VPS etc | MyDNS.JP
名前解決には mydns という無料のサービスを使った.
さっき作ったサーバから, cronでmyDNS.jpに接続しにいくようにすればDNSに登録してくれる.
IPアドレスが変わったりしても大丈夫.
使い方はいたって簡単、あなたが公開したい自宅サーバーなどからMyDNS.JPに対してPOP3やIMAP4、FTP、またDiCE等を使ったHTTP-BASICでIPアドレスを定期的に通知するか、もしくはWEBページからあなたのIPアドレスを直接設定して下さい。
ただ, myDNSのID/PWを乗せたリクエストを暗号化なしで飛ばさないといけない. つらい.
今回は目をつぶった. タイミングを見て固定IP化+セキュリティ対策をちゃんと行う予定
これらの設定をすれば, http://haze-page.tokyo で正しくページに飛ぶようになる.
https化
letsencrypt.org
みんな大好きLet's Encrypt
総合ポータルサイトの使い方解説がわかりやすかった
ちゃんとnginxが立っているサーバで行うこと.
qiita.com
nginxへの設定はQiitaの記事を参考にした.
これらの設定をすれば https://haze-page,tokyo にアクセスできるようになる.
ついでに, httpでアクセスしてきたときにhttpsにリダイレクトする設定も一緒に行なった.
return 301 https://$host$request_uri; でおっけー. 楽.
今のところここまで.
何か作るときにさくっとBootstrapでフロントを作れるようになりたいので, オモテをとりあえず作って行きたい気持ち
