<h1 id="hded12f49e2">Google Cloud Platform</h1> GCPでサーバ立てられるらしいので、ちょっと触ってみた。AWSもそうだけど、いつどこで課金されるのかよくわからなくて敬遠してるんですよね...。でも触ってみた感じAWSよりもUIがわかりやすい気がしてきたので意を決していきます。 GCPはWebサイトなどでGoogle Map APIを使う以上触れないわけにはいかないみたいなサービスでしたが、他にもいろいろできすぎて全容が計り知れません。今日はCompute Engineを使ってみます。 よくわからないまま書く、よくわからない体験記なので、もし参考にされる方はご注意ください。 まず、インスタンスという言葉が全然慣れないんですが、サーバそのものというイメージで合ってるんでしょうか。 <h2 id="h4a1cf939d8">アカウント登録</h2> 前提としてGoogleアカウントが必要です。そして<a href="https://cloud.google.com" target="_blank" rel="noopener noreferrer">Google Cloud Platform</a>にアクセス。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/cac76d688c364f438b4c5849ac5b72b8/gcp_start_001.png" alt=""> 無料トライアルをクリックします。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/236a5182d94f4d1581ad4fed27809e45/gcp_start_002.png" alt=""> 利用規約に目を通して、続行。次の画面で住所やクレジットカード情報を入力します。 ここで入力する情報は本人確認のためで、すぐ課金されたりすることはないようです。 登録完了するとGCPのコンソール画面が表示されます。 <h2 id="h8e5d658cf5">新しいプロジェクトの作成</h2> GCPではプロジェクト単位で管理するようです。 なにをするにも、まずはプロジェクトの作成が必要です。とりあえず適当に作ります。 プロジェクト名は後から変えられないようなので注意して決めます。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/1b6437d174044472b18407fb0b6b9691/gcp_start_003.png" alt=""> 作成すると作成完了まで少し時間がかかります。 次にインスタンスを作成します。 <h2 id="h3596390140">インスタンスの作成</h2> メニューからCompute Engine → VM インスタンスを開きます。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/749d217a17154fdd8b0c53156076e995/gcp_start_004.png" alt=""> 開くと、Compute Engineを準備しています。というメッセージが出ます。初期化に時間がかかるようです。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/40ab0ef7cf484ed3a49e6e16a4c9a776/gcp_start_005.png" alt=""> <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/7033cefb4fc14cdf9536f4668970fdb4/gcp_start_006.png" alt=""> <h3 id="hce4c68a658">名前</h3> 名前は後から変えられないようです。サーバの名前にもなります。慎重に決めます。 <h3 id="h1161475838">リージョン</h3> 物理サーバがある場所を選びます。無料枠はアメリカのみ有効になるみたいなので、アメリカ`us-*`を選択します。 日本からアクセスする予定の場合は距離を考えるといいのかも <h3 id="h1515ebca36">ゾーン</h3> さらにリージョン内でどのサーバを使うか指定します。たぶんそういうことだと思います。 たくさんサーバ(インスタンスか)を立てる場合はゾーンの設定も考えなきゃいけないんだと思います。 <h3 id="h84e88d85de">マシンの構成</h3> 無料枠で利用するならシリーズはN1(第1世代)、マシンタイプはf1-micro(1 vCPU、614MB メモリ)を選択します。 <h4 id="h89dc8547d6">CPUプラットフォームとGPU</h4> リンクをクリックすると展開します。 <h5 id="h1e9dd0ae45">CPUプラットフォーム</h5> たぶん初期状態の自動のままでいいでしょう。 <h5 id="h5e75a7f1c7">GPU</h5> GPUが追加できます。 追加すると無料枠でもお金かかりそうです。 <h3 id="h06e8ee7688">コンテナ</h3> このVMインスタンスにコンテナイメージをデプロイします。というチェックボックスがありますがチェックなし(初期状態)で。 <h3 id="hf325b9e29a">ブートディスク</h3> 初期状態はDebian GNU/Linux 9 (stretch)です。 変更を開いて変更します。 <h4 id="h8ee71a1cf4">OSイメージ</h4> 無料枠ではOSイメージはLinux系を選びます。私はUbuntu 18.04 LTSを選びました。 <h4 id="ha3259a7fed">ブートディスクの種類</h4> これは標準の永続ディスク(初期状態)を選びます。 <h4 id="h34337176a9">サイズ</h4> 初期状態では10GBですが、無料枠で30GBまで使えるので30にしましょう。 <h3 id="h9b02a51a3f">IDとAPIへのアクセス</h3> サービスアカウントとアクセススコープ共に初期状態のまま。 <h3 id="ha79fadd193">ファイアウォール</h3> 通常のウェブサーバを立てる場合はHTTPとHTTPSの両方にチェックを入れます。 <h4 id="h10eec59669">管理、セキュリティ、ディスク、ネットワーク、単一テナンシー</h4> リンクをクリックすると展開します。 <h5 id="h47806f6698">ネットワーキング</h5> 設定を変えるのはこの項目のみ。 <h5 id="h457e53bd2e">ネットワークインターフェース</h5> ここで、外部IPが初期状態ではエフェメラルになっています。エフェメラルはIPがころころ変わって面倒なので固定IPにします。 IPアドレスを作成を選択します。 モーダルウィンドウが出てきて静的IPアドレスの予約ができます。 ここでも名前は後から変えられないようです。 適当な名前を設定します。 ネットワークサービス階層は標準を選択します。 予約を押すと自動的に作成、設定されます。 完了を押してネットワークインターフェースの設定を閉じます。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/467732c453e34763b0b597505feb1a0c/gcp_start_007.png" alt=""> <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/7ba842f7755045b68c8afa12337bed1a/gcp_start_008.png" alt=""> <h2 id="h8b76ece3a2">作成完了</h2> 作成を押すと数分でインスタンスが作成され自動的に起動します。 <h2 id="hfe774d3cd7">外部IPアドレスについて</h2> インスタンス作成中にネットワーク設定で外部IPアドレスを作成しますが、インスタンスなどで使用していない場合は有料となるようです。 Google Cloud PlatformのメニューからVPCネットワーク → 外部IPアドレスを開きます。ここで不要な外部IPアドレスの確認および削除ができます。 外部IPアドレスをリストから選択して 静的アドレスを解放 で削除できます。 <h2 id="hadd448e40b">SSH接続</h2> VMインスタンスの詳細画面からリモートアクセスできます。 ブラウザウィンドウで開く が一番手っ取り早いと思います。

GCP の Compute Engine を使ってみた

<h1 id="hcb3a1f0cdd">ふたりでつけるおさいふアプリ</h1> おさいふアプリは2人で使うためのアプリです。 <a href="https://osaifu.zatsuzen.com" target="_blank" rel="noopener noreferrer">https://osaifu.zatsuzen.com</a>

おさいふというサービスを作った

<h1 id="h2e03bd9323">olタグ</h1> HTMLで番号付きのリストを使いたい場合は<code>&lt;ol&gt;</code>タグを使います。 自動で上から採番されるのでとっても便利。 こういうやつですね。 <ol><li>aaa</li><li>bbb</li><li>ccc</li></ol> <pre><code>[html:HTML]
&lt;ol&gt;
 &lt;li&gt;aaa&lt;/li&gt;
 &lt;li&gt;bbb&lt;/li&gt;
 &lt;li&gt;ccc&lt;/li&gt;
&lt;/ol&gt;</code></pre> このマーカーはわりと好きなように変更できます。標準で用意されているマーカーは以下を参照。 <a href="https://developer.mozilla.org/ja/docs/Web/CSS/list-style-type" target="_blank" rel="noopener noreferrer">list-of-type | MDN</a> <h1 id="h037a27c673">オリジナルマーカー</h1> 以下のような採番をしたいときのサンプルです。 a-1. aaaa-2. bbba-3. ccc <pre><code>[css:CSS]
ol {
 list-style: none;
}
ol li {
 counter-increment: li;
}
ol li::before {
 content: 'a-' counter(li) '. ';
}</code></pre> SCSSで書くと以下のような感じ。 <pre><code>[scss:SCSS]
ol {
 list-style: none;

 &amp; &gt; li {
 counter-increment: li;

 &amp;::before {
 content: 'a-' counter(li) '. ';
 }
 }
}</code></pre> <code>li</code>に疑似要素<code>::before</code>や<code>::after</code>を使うことでいろいろなオリジナルマーカーを作れます。

ゆったりWeb手帳

気になったことをのんびり書くよ

おさいふというサービスを作った

ふたりでつけるおさいふアプリ