この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
三種の神器を短時間で試してみよう
Go_SaaS 三種の神器は、AWS上にシステムを構築しているAuth0、CircleCI、Stripeの3社による ISV・スタートアップ企業のためのSaaS化支援プログラム です。
それぞれ以下の機能を提供するSaaSとなっています。どのようなビジネスを始める上でも、必ず「土台」として必要になるものです。
- Auth0 : ID管理のSaaS。ID/Passwordを使ったログイン、ソーシャルログイン、エンタープライズログインなどに柔軟に対応。
- CircleCI : 継続的インテグレーション/継続的デプロイ(CI/CD)のSaaS。ブランチごとのワークフローも自由にカスタマイズできる。
- Stripe : オンライン決済のSaaS。クレジットカード決済・定期購読や、ApplePay/GooglePayといったモバイル向けの決済にも対応。
三種の神器を短い時間でまずはサクッとで試してみたい! という人のために、3つのSaaS(+GitHub)全てを導入し、スタートラインに立てるようになるまでの手順を書いてみました。
なお、各サービスのアカウントは作成済みの前提で進めます。いずれのサービスも アカウント登録が簡単・無料で始められる ようになっていますので、まずはアカウントをサクッと用意してから臨んでください。
GitHubリポジトリを作成する
まずはGitHubリポジトリを適当な名前で作成。go-saas-sample
としました。空リポジトリをCloneしておきます。
Auth0の導入
次にAuth0のテナントを作り、アプリケーションを立ち上げるところまで進めます。テナント名は適当に。go-saas-sample
としました。
左メニューの「Application」の「Default App」を選び、「Quick Start」からアプリケーションの種類を選びます。今回は「Single-Page App」の「Vue」を選びました。
「DOWNLOAD SAMPLE」をクリックし、サンプルプログラムをダウンロードします。
ダウンロードしたZipファイルを解凍し、先ほどCloneしたリポジトリ配下に置きます。その後、ルートディレクトリで以下を実行します。
$ yarn install
$ yarn serve
http://localhost:3000/
で起動します。
次にAuth0のダッシュボードに戻り、「Default App」の「Settings」タブの以下をそれぞれ設定します。
設定項目 | 値 |
---|---|
Allowed Callback URLs | http://localhost:3000/callback |
Allowed Web Origins | http://localhost:3000 |
これでログインまで試せます。右上の「Login」をクリックするとログインを試せますので、時間のある方は試してみてください。
Stripeの導入
まずアカウントを作成します。
あとはAPIキーを確認するだけで、実装まで進めます。左メニューの「開発者」から「APIキー」を選び、「公開可能キー」と「シークレットキー」をメモしておきます。
あとは実装です。Auth0から作成したサンプルの public/index.html
と src/views/Home.vue
をそれぞれ書き換えます。
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>01-login</title>
</head>
<body>
<noscript>
<strong>We're sorry but 01-login doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
src/views/Home.vue
<template>
<div id="form-container">
<form id="payment-form" @submit="onSubmit">
<div class="form-row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element">
</div>
<div id="card-errors" role="alert"></div>
</div>
<button>Submit Payment</button>
</form>
</div>
</template>
<script>
const stripe = Stripe('【Stripeの公開可能キー】');
export default {
name: "home",
data() {
return {
card: {}
}
},
mounted() {
const elements = stripe.elements();
const style = {
base: {
color: '#32325d',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
this.card = elements.create('card', {style: style});
this.card.mount('#card-element');
this.card.addEventListener('change', function(event) {
const displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
},
methods: {
async onSubmit(event) {
event.preventDefault();
const result = await stripe.createToken(this.card);
if (result.error) {
const errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
alert(`token : ${result.token.id}`);
}
}
}
};
</script>
<style lang="scss" scoped>
#payment-form {
margin: 2em;
width: 300px;
}
#card-element {
margin: 1em 0 1em 0;
width: 300px;
}
</style>
これで実行してみます。テスト用のクレジットカード番号をフォームに入力し、Submitしたらアラートでトークンが表示されれば成功です。
あとはトークンを渡し、サーバーサイド側で決済を実行…といきたいところですが、今回はサーバーサイドを用意する代わりに、コマンドライン(cURL)から決済を実行してみます。
$ curl https://api.stripe.com/v1/charges \
-u 【Stripeのシークレットキー】 \
-d amount=2000 \
-d currency=jpy \
-d source=【クレジットカードのトークン】 \
-d description="Example charge"
ダッシュボードを見ると、決済されていることが確認できます。
CircleCIの導入
最後にCircleCIを使った、継続的インテグレーション(CI)を導入します。
まず .circleci/config.yml
を作ります。
.circleci/config.yml
version: 2.1
executors:
default:
docker:
- image: circleci/node:10
commands:
npm_install:
steps:
- restore_cache:
key: dependency-cache-{{ checksum "package.json" }}
- run:
name: install npm
command: yarn install
- save_cache:
key: dependency-cache-{{ checksum "package.json" }}
paths:
- node_modules
jobs:
build:
executor: default
working_directory: ~/repo
steps:
- checkout
- npm_install
- yarn build
これまでの変更を全てCommit&Pushします。
次にCircleCIのダッシュボードを開き、左メニューから「ADD PROJECTS」を選びます。リポジトリ一覧から、今回使っているリポジトリの「Set Up Project」をクリックします。
一番下にある「Start Building」をクリックします。
左メニューの「JOBS」から、現在実行中のジョブのステータスが確認できます。無事に完了しました。
SaaSをフル活用してビジネスを爆速でスタートさせよう
これからビジネスをスタートする上で、今回ご紹介した「三種の神器」は欠かせません。というより、欠いた状態で始めるのとは立ち上げスピードが全然違います。必要不可欠な「ID管理」「CI/CD」「決済」を爆速で導入し、本来注力すべきビジネスを始めるスタートラインにいち早く立てるようにしましょう!