はぜにっき

日記です。(毎日更新ではない)

プロフィールページみたいなものを作った(仮)

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でフロントを作れるようになりたいので, オモテをとりあえず作って行きたい気持ち