Kubernetesを利用してみたいと思い、minikubeを利用してみる事にしました。

minikubeとは

小規模なKubernetes環境を構築するための作られたパッケージです。
自分のPC上に、仮想的にKubernetesの環境を構築することができます。
Windows上でもLinux上でもインストールできる点が特徴です。

コマンド

実行

minikube start --vm-driver=none

仮想マシンを再起動した際は、Kubernetesクラスタが落ちているので、再起動が必要になります。
また、VirtualBoxをインストールしていない際は、--vm-driver=noneを指定する必要があります。

停止

minikube stop

状態確認

minikube status

アドオンを操作するコマンド

追加

minikube addons enable ADDON_NAME

削除

minikube addons disable ADDON_NAME

一覧確認

minikube addons list

まとめ

Minikubeは簡単にKubernetesの環境を構築・確認できるので今後、活用していこうと思います。

今回は、RaspberryPiのPythonバージョンを変更する機会があったので、記事にまとめてみました。
コマンドのリンク設定についての記事ですので、Pythonコマンド以外のコマンドでも利用できる知識だと思います。

RaspberryPiの情報

今回利用するRaspberryPiの情報は以下の通りです。

pi@raspberrypi:~ $ cat /etc/os-release
PRETTY_NAME="Raspbian GNU/Linux 10 (buster)"
NAME="Raspbian GNU/Linux"
VERSION_ID="10"
VERSION="10 (buster)"
VERSION_CODENAME=buster
ID=raspbian
ID_LIKE=debian
HOME_URL="http://www.raspbian.org/"
SUPPORT_URL="http://www.raspbian.org/RaspbianForums"
BUG_REPORT_URL="http://www.raspbian.org/RaspbianBugs"

現在のPythonコマンドの状況

pi@raspberrypi:/usr/bin $ python -V
Python 2.7.16

ちなみに、Python3も既に入っています。

pi@raspberrypi:~ $ python3 -V
Python 3.7.3

リンクの修正

コマンドを実行した時に、どの実行ファイルを利用するかを、設定しなおします。

リンク先の確認

下記のコマンドでPythonコマンドのリンク先を確認します。

cd /usr/bin
ls -l py*

確認結果は下記のようになります。
lrwxrwxrwx 1 root root 7 3月 5 2019 python -> python2
PythonのシンボリックがPython2になっている事が確認できます。

　　　　・
　　　　・
　　　　・
lrwxrwxrwx 1 root root       7  3月  5  2019 python -> python2
lrwxrwxrwx 1 root root      14  3月  5  2019 python-config -> python2-config
lrwxrwxrwx 1 root root       9  3月  5  2019 python2 -> python2.7
lrwxrwxrwx 1 root root      16  3月  5  2019 python2-config -> python2.7-config
-rwxr-xr-x 1 root root     154 12月 30  2018 python2-pbr
-rwxr-xr-x 1 root root 2984816  4月  6  2019 python2.7
lrwxrwxrwx 1 root root      36  4月  6  2019 python2.7-config -> arm-linux-gnueabihf-python2.7-config
lrwxrwxrwx 1 root root       9  3月 26  2019 python3 -> python3.7
lrwxrwxrwx 1 root root      16  3月 26  2019 python3-config -> python3.7-config
-rwxr-xr-x 2 root root 4275580  4月  3  2019 python3.7
lrwxrwxrwx 1 root root      36  4月  3  2019 python3.7-config -> arm-linux-gnueabihf-python3.7-config
-rwxr-xr-x 2 root root 4275580  4月  3  2019 python3.7m
lrwxrwxrwx 1 root root      37  4月  3  2019 python3.7m-config -> arm-linux-gnueabihf-python3.7m-config
lrwxrwxrwx 1 root root      10  3月 26  2019 python3m -> python3.7m
lrwxrwxrwx 1 root root      17  3月 26  2019 python3m-config -> python3.7m-config
lrwxrwxrwx 1 root root      10  3月 26  2019 pyvenv -> pyvenv-3.7
-rwxr-xr-x 1 root root     436  4月  3  2019 pyvenv-3.7
　　　　・
　　　　・
　　　　・

リンクを削除する

下記のコマンドでリンクを削除します。

sudo unlink python

リンクが削除されているため、現段階でpythonコマンドを実行しても、何も実行されません。

リンクを再生成する

下記のコマンドでPython３へのシンボリックリンクを作成する。

sudo ln -s python3 python

設定の確認

下記コマンドを実行して設定を確認します。

cd /usr/bin
/usr/bin $ ls -l py*

　　　　・
　　　　・
　　　　・
lrwxrwxrwx 1 root root       7  6月  8 23:36 python -> python3
lrwxrwxrwx 1 root root      14  3月  5  2019 python-config -> python2-config
lrwxrwxrwx 1 root root       9  3月  5  2019 python2 -> python2.7
lrwxrwxrwx 1 root root      16  3月  5  2019 python2-config -> python2.7-config
-rwxr-xr-x 1 root root     154 12月 30  2018 python2-pbr
-rwxr-xr-x 1 root root 2984816  4月  6  2019 python2.7
lrwxrwxrwx 1 root root      36  4月  6  2019 python2.7-config -> arm-linux-gnueabihf-python2.7-config
lrwxrwxrwx 1 root root       9  3月 26  2019 python3 -> python3.7
lrwxrwxrwx 1 root root      16  3月 26  2019 python3-config -> python3.7-config
-rwxr-xr-x 2 root root 4275580  4月  3  2019 python3.7
lrwxrwxrwx 1 root root      36  4月  3  2019 python3.7-config -> arm-linux-gnueabihf-python3.7-config
-rwxr-xr-x 2 root root 4275580  4月  3  2019 python3.7m
lrwxrwxrwx 1 root root      37  4月  3  2019 python3.7m-config -> arm-linux-gnueabihf-python3.7m-config
lrwxrwxrwx 1 root root      10  3月 26  2019 python3m -> python3.7m
lrwxrwxrwx 1 root root      17  3月 26  2019 python3m-config -> python3.7m-config
lrwxrwxrwx 1 root root      10  3月 26  2019 pyvenv -> pyvenv-3.7
-rwxr-xr-x 1 root root     436  4月  3  2019 pyvenv-3.7
　　　　・
　　　　・
　　　　・

上記の一覧に、lrwxrwxrwx 1 root root 7 6月 8 23:36 python -> python3と表示されているので、設定されていることがわかります。

ついでにバージョン情報も確認しておきましょう

python -V

pi@raspberrypi:/usr/bin $ python -V
Python 3.7.3

まとめ

今回は、Pythonコマンドのリンクを変更し、pythonコマンドで起動するPythonのバージョンを変更しました。
この方法を利用する事で、別のコマンドのバージョンを変更する際にも、活かせると思います。

ターミナル等の知識を身に付けて、linuxと仲良くなれるように頑張っていきたいと思います。

Kubernetesを利用してみたいと思い、macOSでkubectlを導入して、Hello-Worldを表示させてみました。

kubectlのインストール

curlを利用して、macOSへkubectlのバイナリをインストールします。

最新リリースをダウンロードする

下記のcurlコマンドで最新リリースファイルをダウンロードします。

curl -LO "https://storage.googleapis.com/kubernetes-release/release/$(curl -s https://storage.googleapis.com/kubernetes-release/release/stable.txt)/bin/darwin/amd64/kubectl"

kubectlバイナリを実行可能にする

ダウンロードしたファイルの実行権限を変更し、実行できるようにします。

chmod +x ./kubectl

バイナリをPATHの中に移動

コマンドで実行できるように、バイナリファイルをPATHが通っているフォルダに移動します。

sudo mv ./kubectl /usr/local/bin/kubectl

インストールしたバージョンが最新かを確認

インストールが正常に完了しているかを確認するために、バージョンを表示・確認します。

kubectl version

Client Version: version.Info{Major:"1", Minor:"15", GitVersion:"v1.15.5", GitCommit:"20c265fef0741dd71a66480e35bd69f18351daea", GitTreeState:"clean", BuildDate:"2019-10-15T19:16:51Z", GoVersion:"go1.12.10", Compiler:"gc", Platform:"darwin/amd64"}

kubernetesを実行してみる

下記のコマンドでhello-worldというイメージを実行する事ができます。

kubectl run hello-world --image hello-world --restart=Never

pod/hello-world createdと表示されれば作成されています。

動作の確認

実際に、動作しているのかを確認してみましょう。

kubectl get pod

下記のような実行結果が表示されます。

NAME          READY   STATUS      RESTARTS   AGE
hello-world   0/1     Completed   0          2m6s

出力されたログを確認

起動したコンテナから出力されたログを確認してみましょう。

kubectl logs pod/hello-world

Hello from Docker!
This message shows that your installation appears to be working correctly.

To generate this message, Docker took the following steps:
 1. The Docker client contacted the Docker daemon.
 2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
    (amd64)
 3. The Docker daemon created a new container from that image which runs the
    executable that produces the output you are currently reading.
 4. The Docker daemon streamed that output to the Docker client, which sent it
    to your terminal.

To try something more ambitious, you can run an Ubuntu container with:
 $ docker run -it ubuntu bash

Share images, automate workflows, and more with a free Docker ID:
 https://hub.docker.com/

For more examples and ideas, visit:
 https://docs.docker.com/get-started/

上記のログが表示されれば、正常に動作しています。

実行したコンテナのデータを削除

確認・実行が完了したコンテナを残し続けておく必要は無いので、こまめに削除した方が良いと思います。

下記コマンドで先ほど実行した物を削除します。

kubectl delete pod/hello-world

削除用コマンドを実行した結果、下記の実行結果が表示されます。

pod "hello-world" deleted

最後に

kubernetesでHello-Worldのコンテナを実行してみました。 さらに、コンテナ技術について詳しく学び、開発に活かしていきたいと思います。

マークダウンファイルを作成する際に、記載ミス等を自動で指摘して欲しいと思い、Markdownlintの設定を行おうと思いました。

Markdownlintの設定

VSCodeの拡張機能から、markdownlintと検索します。 検索した結果から、右下のインストールを選択します。

※今回の画像は既にインストールしているため、インストールボタンが表示されていません。

インストールが完了したら、新規ファイルで.mdファイルを作成してみましょう。

インストールが正しく完了していたら、文法的におかしい部分の指摘をしてくれるようになっているはずです。

設定項目の一覧

2020年06月現在、下記のようなルールが実装されている。

lintの設定

markdownlintを使用していく上で、指摘して欲しくない部分も指摘される事が有るかと思います。
その際は、チェックのルールを変更して、指摘されないようにする事ができます。

VSCodeの設定変更方法

設定の画面で、markdownlintと検索して、settings.jsonで編集というボタンをクリックします。

クリックすると、settings.jsonが開き、下記のような内容が表示されていると思います。
その中に設定項目を記載します。

  "markdownlint.config": {
    |ここに設定を記載する
  }

  "markdownlint.config": {
    "single-h1": false
  }

上記の設定を記載し、保存する事で、markdownlintの設定が反映され、文法チェックも変更したルールに則って行われます。

さいごに

今回も、VSCodeでMarkdownを扱う際の便利機能についてまとめてみました。 まだ、設定していない人は、是非設定してみてください😁

前回の記事でRemarkの設定方法を記事にしましたが、様々な設定項目が存在したので、整理しておきたいと思います。

設定一覧

※ pedantic は今後削除される予定なので、紹介していません

さいごに

今回の設定一覧を作成した事で、自分の設定を見直す事ができました。 プログラミングを行う上で一番重要なのは環境構築と言っても過言ではないくらい重要なので、環境の設定はこだわっていきたいと思います。

VSCodeを良く利用するようになり、Markdownも全てVSCodeで書くようになったのですが、保存時に自動フォーマットを行いたくなったため設定してみました。

保存時に自動フォーマットする方法

VSCodeの設定画面を表示します。

• Macの場合、Cmd + ,で設定画面が開きます。

設定画面が開いたら、editor.formatOnSaveを検索します。

editor.formatOnSaveの項目が表示されたら、チェックボックスをTrueに設定します。

一度、Markdownファイルを作成して保存してみましょう。 良い感じで、フォーマットされれば問題有りません。

自分の場合は、JavaScriptのフォーマッターとして、Prettierを導入していたため、フォーマット時に日本語と英字の間に無駄なスペースが常に入るようになってしまいました😢

フォーマッターの変更

今回は、MarkdownのフォーマッターをPrettierからRemarkに変更します。

Prettierを無効化

上部の表示からコマンドパレットを開きます。

• Macの場合は、Cmd + Shift + pで開く事が出来ます。

コマンドパレットが開いたら、settings jsonと入力し、下記のボタンをクリックします。

基本設定: 設定(JSON)を開く
Preferences: Open Settings (JSON)

いくつか設定が記載されているかもしれませんが、ファイルの一番下に、下記の文を追加します。

  "prettier.disableLanguages": ["markdown"],

上記の設定で、Pretterを利用しないように設定されていると思います。

現段階では、自動でフォーマットするツールが入っていないので、次に導入していきたいと思います。

Remarkの導入

VSCodeの左の拡張機能ボタンをクリックして、検索窓でRemarkを検索します。

• Macの場合は、Cmd + Shift + xでも表示出来ます。

検索して、表示されたら、インストールをクリックします。

インストールが完了したら、Markdownファイルを作成して、保存してみましょう。
自動でフォーマットされると思います。

Remarkの設定

自動で、フォーマットされるようになったのですが、下記のようなYAMLで書かれたメタ情報ブロック(Front-matter)の上下の---が* * *に変換されてしまうので、設定を変更したいと思います。

---
title: test
date: "2015-05-28T22:40:32.169Z"
---

先ほど開いたsettings.jsonに設定を追加していきます。

今回は、2つの設定を変更します。

1. 区切り線の種類
   *を-に変更
2. 区切り線の間にスペースを追加しない
   デフォルト設定ではスペースが追加されるので、追加しないように設定

追加するタイトル

"remark.format": {
    "rules": {
      "rule": "-",
      "ruleSpaces": false
    }
  },

"rule": "-"で区切り線の種類を-に設定しています。
"ruleSpaces": falseで区切り線の間にスペースが入らないように設定しています。

上記の設定で、保存時に自動でMarkdownのフォーマットを行う事が可能になりました。

最後に

今回は、フォーマッターの設定をおこないました。

フォーマッターが有れば、プログラミングや文章作成が捗るので、Markdown意外にもしっかりと設定して、利用していきたいですね！

また、Remarkの設定は今回利用した以外にもいろいろなものが有るので、そちらもまとめてみたいと思います。

Belugaのカートと注文の設定方法について記載します。

この記事はPart1〜3のPart3です。
Part1 環境の構築方法について
Part2 商品の登録などの設定方法

カートとチェックアウトページについて

カートについて

カートは、下記のような構成になっています。
CHECK OUTボタンを押すと配送及び支払い方法に移動します。

チェックアウトページについて

• チェックアウトページとは
  お客様が配送および支払い情報を入力し、商品の購入を完了するページです。

顧客の電子メール、配送先住所、配送方法（該当する場合）、およびクレジットカード情報がキャプチャされます。

配送オプションについて

商品の配送オプションは3種類の中から、設定する事が出来ます。

• 送料無料
  Belugaのデフォルトの設定です。
  設定は簡単です。
• 発送料一律
  一律の発送料を設定出来ます。
• 価格を計算する配送プラットフォームとの統合
  現在のBelugaでは対象外です。

配送料一律の設定方法

定額配送を設定するには、CONFIGのSETTINGSページを開き、ADD SHIPPING OPTIONSから設定します。

ADD SHIPPING OPTIONSを押すと、Shipping Optionsが表示されます。 ここに、配送する名前と料金を入力します。

※重要 配送オプションについては、Stripeキーに紐づいているため、TestキーとLive(本番)キーの両方で設定する必要があります。

注文の管理について

注文管理者

まず、確認するために、http://localhost:3000/loginにアクセスして、ログインします。

adminパスワードはconfig.envファイルに環境変数として設定した物を利用します。
また、管理ステータスはセッションCookieに保存されます。

クレジットの入力

注文管理ページ

注文の管理ページは4つのタブに分かれており、これらはStripe APIの4つの注文ステータスに対応しています。

• PAID
  支払いが正常に行われた注文
• FULFILLED
  「配送完了」とマークされている商品
• CREATED
  配送情報の入力が開始されたが、破棄された注文。
  このステータスは、顧客がクレジットカードの支払いで送信を押す直前にブラウザタブを閉じたことを示しています。
• CANCELED Stripeのウェブサイトからキャンセル/返金された注文

メールの設定について

電子メールテンプレートはHandlebarsを使用し、email-templatesパッケージを介して送信されます。
注文ステータスが変更されるたびに、対応するメールテンプレートと件名を使用して、そのステータスのメールが送信されます。

emailテンプレートのフォルダ構成

├── emails
│   ├── Ordered
│   │   ├── html.hbs
│   │   └── subject.hbs
│   ├── Processed
│   │   ├── html.hbs
│   │   └── subject.hbs
│   ├── Received
│   │   ├── html.hbs
│   │   └── subject.hbs
│   └── Shipped
│       ├── html.hbs
│       └── subject.hbs

メール送信のロジックはserver/orders.jsにあります。
Nodemailerを利用しています。
Nodemailerは、GmailのアカウントのOAuth2を利用します。

sendEmail()は、注文を取得して構成変数を格納し、対応するメールテンプレートに渡します。
テンプレートは、ハンドルバーを介してHTMLとしてレンダリングされます。

GmailのOAuth2設定方法

Gmail APIは、Gmailのメールボックスにアクセスして、メール送信するために使用できるRESTful APIです。
お客様にメールを送信するために利用します。

1. コンソールにアクセス
   開発者コンソールにアクセスします。
   https://console.developers.google.com
2. プロジェクトの作成
   プロジェクトがない場合は、プロジェクトを作成するように求められます。
   APIの右のプロジェクトを選択し、プロジェクトの一覧を表示します。
   新しいプロジェクトを選択し新規プロジェクトを作成します。

プロジェクト名を入力して、作成をクリックします。

作成が完了したら、APIロゴの右のプロジェクトの一覧表示ボタンから、一覧を表示します。
先ほど作成したプロジェクトを選択し、右下の開くを選択します。

1. APIの有効化

APIとサービスを有効化をクリックします。

検索画面で「gmail」と検索し、クリックします。

有効にするボタンをクリックします。

1. 認証情報の作成
   左のメニューから認証情報を選択します。

上部の認証情報を作成ボタンを押して、OAuthクライアントIDを選択します。

◾️ OAuthの設定

OAuthの同意が必要な場合は同意画面を開くボタンを押して、User Typeの外部を選択してください。

「OAuth 同意画面」の設定が必要なので、必要項目を入力します。 名前を入力して作成ボタンを押して作成します。

◾️ OAuthクライアントの作成

OAuthクライアントに名前を入力します。
後で更新トークンとアクセストークンを生成するために、リダイレクトURIとしてhttps://developers.google.com/oauthplaygroundを設定します。

作成ボタンを押して、作成が完了すると下記の画面が表示されます。 クライアントIDとクライアントシークレットをコピーしてください。

◾️ access tokensおよびrefresh tokensを生成するには、https://developers.google.com/oauthplaygroundに移動します。
右上にある歯車のアイコンをクリックし、[Use your own OAuth credentials]をオンにして、Client IDとClient Secretを入力します。

左側の列で、Gmail API v1のhttps://mail.google.com/を選択し、Authorise APIsをクリックします。

複数のアカウントにサインインしている場合は、プロンプトが表示されたら、関連するアカウントを選択します。

確認されていないという警告が表示された場合は、左下の詳細ボタンを押して、アプリ名（安全ではないページ）に移動と表示されている部分をクリックしてください。

権限の付与について聞かれた場合は、許可をクリックします。

Exchange authorisation code for tokensをクリックします。これによりRefresh Token、Expires Tokenが提供されます。

環境変数に資格情報を追加

config.envファイルに資格情報を追加します。

auth認証オブジェクトの説明

• user
  ユーザーのメールアドレス（必須）
• clientID
  アプリケーションの登録済みクライアントID
• clientSecret
  アプリケーション登録済みのクライアントシークレット
• refreshToken
  オプションの更新トークン
  当該項目が設定されている場合、Nodemailerは既存のアクセストークンが期限切れ又は失敗した場合に新しいアクセストークンを生成しようとします。
• accessToken
  ユーザーのアクセストークン
  refreshTokenが使用できず、トークン更新コールバックが指定されていない場合にのみ必要です。
• expires
  現在のaccessTokenのオプションの有効期限

設定例

設定例

EMAIL_FROM="メールアドレス"
EMAIL_CLIENT_ID="GmailのクライアントID(.apps.googleusercontent.com)"
EMAIL_CLIENT_SECRET="クライアントシークレット"
EMAIL_REFRESH_TOKEN="取得したリフレッシュトークン"
EMAIL_ACCESS_TOKEN="取得したアクセストークン"

購入処理の確認

処理が上手く完了したら、下記のような画面が表示されます。

Stripeのテストカードについて

下記のサイトにテスト用のクレジットカードのデータがあります。
参考にしてみてください。

https://stripe.com/docs/testing

前回、環境を構築したBelugaのECサイトの設定を行っていこうと思います。

この記事はPart1〜3のPart2です。
Part1 環境の構築方法について
Part3 カートと注文関連の設定方法

ストア設定

ストアの初期ロードでは、ストアのnameおよびPublishable API keyのプロンプトが表示されます。

名前の設定

nameの欄に適当な名前を入力してください。

※ サイト名は、後々変更する事も可能です。

公開APIキーの入力

Publishable API keyの欄にStripeの公開APIを入力します。

重要！ APIキーにtestとliveがありますが、製品の情報はAPIキーに紐付くので、testで登録しているものはliveのAPIに変更すると消えてしまいます。

入力が完了したら、次へをクリックします。

Adminのログイン

http://localhost:3000/loginにアクセスします。

下記の画面が表示されるので、config.envで設定したパスワードを入力します。

ログインが完了すると、下記のような画面が表示され、様々な管理画面を操作する事が可能です。

サイトの設定

テーマの設定

CONFIGを選択し、THEMEを選択してみましょう。 すると、テーマの設定ができる画面が表示されます。

配色を自分好みに設定しましょう！

ランディングページ

src/Landing.jsを開いてコードを確認してみましょう。

このページはfeatured-productsデフォルトでコレクションをロードします。
おすすめ商品コレクションを定義していない場合は、すべての商品が表示されます。
詳細については、コレクションの追加を参照してください。

製品の追加

configページから、CREATE NEW PRODUCTをクリックして、商品を登録してみましょう。

デフォルトの製品ページは下記のデザインになっています。

名前と説明の入力

商品名や説明を入力します。

製品バリエーションの入力

バリエーションを入力してNEXTをクリックします。

価格の入力

商品バリエーションに対する価格を入力します。

画像の登録

UPLOAD IMAGEをクリックして画像を登録します。

サイトは、最も近いアスペクトに応じて画像を、正方形、3:4または4:3アスペクト比に自動的にフォーマットします。

複数の画像の場合、ドラッグして並べ替えることができます。

FINISHをクリックして、データを登録します。

商品の表示設定

上記の手順で製品が製品リストに表示されます。
Live on Site（右側のボタン）をクリックして、サイトへの表示設定をオンにしてください。

SHOPページの確認

先ほど登録した商品が表示されています。

商品をクリックすると、商品の詳細ページを表示する事が出来ます。

商品の残り数に応じた処理

商品の残り個数が10未満の場合はHurry! Only 4 Availableのようなメッセージが表示されます。

商品の残り個数が0の場合は商品をカートに追加できなくなります。

コレクションの編集

CONFIGページのCOLLECTIONSタブを選択し、コレクションページを開きます。

今回は、デフォルトで登録されている、Featured Productsというコレクションを編集していきます。
デフォルト設定では、Featured Productsの商品がランディングページにおすすめ商品として掲載されます。

Featured Productsをクリックして編集画面へ移動します。

リストが表示されるので、追加したい商品を選択します。

選択して、セーブすると、コレクションが保存されます。

Viewボタンを押して確認してみましょう。 コレクションに登録した商品の一覧が表示されます。

コレクションの新規作成

CONFIGページのCOLLECTIONSタブを選択し、コレクションページを開きます。
CREATE NEW COLLECTIONSを選択しましょう。

名前・商品の登録

「Summer Drink」という名前のコレクションを作成します。
商品を選択したら、NEXTボタンを押します。

カバー画像の設定

カバー画像を選択し、アップロードします。
選択が完了したら、FINISHをクリックします。

ランディグページのコレクション変更

ランディングページのコレクションを変更するには、コンポーネントsrc/components/Landing.jsを開いて編集します。

下記のfeatured-productsの部分を設定したいコレクション名にしてください。

const featuredProducts = getProductsFromCollection(config, "featured-products");

ページの追加

CONFIGのABOUTのチェックを有効にする事で、Aboutページを表示する事が出来ます。

テキストボックス内にAboutページに表示する内容を入力してください。

ABOUTページを有効にすると上部のバーにABOUTページへのリンクが生成されます。

まとめ

サイトの設定を行いました。

次回は、カートの設定と配送の設定についての記事を書いてみたいと思います。

ECサイトのOSSが有るとの事だったので、一度試してみたいと思い、記事を描き始めています！

この記事はPart1〜3のPart1です。
Part2 商品の登録などの設定方法
Part3 カートと注文関連の設定方法

開発環境の導入方法

実行環境

下記の実行環境で実行します。

MacOS Catalina Ver 10.15.5
メモリ 16GB

nodeの導入手順

今回はMacを利用するので下記の手順を行います。

指示に従って Homebrewをダウンロードしてインストールします。
ターミナルを開きます。
xcode-select --installを実行して、Xcodeコマンドラインツールをインストールします。
それが失敗する場合は、アップルのサイトから直接ダウンロードしてください。
ノードをインストールするために、brew install nodeをターミナルから実行します。
brew install yarnを実行してYarnをダウンロードします。

Gitの導入手順

Gitをダウンロードしてインストールする手順は、オペレーティングシステムによって異なります。システムのガイドに従ってください：

macOSにGitをインストールする WindowsにGitをインストールする LinuxにGitをインストールする

実行環境の確認

下記のコマンドでそれぞれの環境を確認します。

yarn --version

1.22.4

node --version

v12.16.3

git --version

git version 2.26.2

belugaの導入方法

リポジトリのクローン

下記のコマンドでリポジトリをクローンします。

git clone git@github.com:binx/beluga.git

現在のディレクトリをサイトフォルダに移動します。

cd beluga

資格情報を設定

テキストエディターを開き、プロジェクトのルート/ディレクトリにconfig.envというファイルを作成します。
ファイルの中には下記の情報を記載します。

STRIPE_KEY={Secret API key from Stripe}
ADMIN_PW={your password to log in}
SESSION_SECRET={secret session key}

StripeからシークレットAPIキーを取得する必要があるので、ストライプの設定を行います。

Stripeの設定

Stripeアカウントを作成

アカウントを持っていない場合は、アカウントを作成します。

APIキーの取得方法

左のメニューのAPIキーをクリックします。

今回は、テスト用のAPIを利用します。
なので、テストデータの表示中のチェックはオンにしておいてください。
シークレットキーの表示を選択します。

envファイルの設定

STRIPE_KEY="ストライプのシークレットキー"
ADMIN_PW="ECサイトの管理者用パスワード"
SESSION_SECRET="サイトのCokie用のシークレットキー"

開発環境の実行

必要なパッケージをインストール

下記のコマンドで必要なパッケージをインストールします。

yarn

開発用サーバーを起動

まずは、yarnで起動します。

yarn start

次に、別のターミナルを起動して、ノードサーバーを起動します。

node server/index.js

サイトを確認する

上記の手順を実行し、http://localhost:3000/にアクセスすると、デフォルトのサイトが表示されると思います。

必要最低限の構成を含んだECサイトが起動したと思います。
簡単に、ECサイトの雛形を構築する事が出来ました。

まとめ

簡単にECサイトの構築ができました。
次回からは、ECサイトの設定をしていこうと思います。

GitHubで管理しているWebアプリをAWS上に簡単にデプロイしてみたいと思い、Amplifyでデプロイする事にしました。

Amplifyとは

セキュアでスケーラブルなモバイルアプリケーションやウェブアプリケーションを構築するための開発プラットフォームです。
ユーザーの認証、データとユーザーのメタデータのセキュアな保存、データへの選択的なアクセスの許可、機械学習の統合、アプリケーションのメトリクスの分析、サーバー側コードの実行するといった作業を容易にします。
Amplify は、バージョンコントロール、コードのテスト、実稼働環境へのデプロイといったモバイルアプリケーションの開発ワークフロー全体をカバーしています。 容易にスケーリングできます。
AmplifyのライブラリとCLIはオープンソースであり、カスタマイズや自分自身のプラグインの作成する事が可能です。

サンプルのReactAppを作成する

nodeのバージョン確認

まずは、nodeのバージョンを確認します。 下記のコマンドをターミナルで実行して、nodeがインストールされているかを確認してください。

node -v

v12.16.3

新しいReactAppを作成する

下記のコマンドでアプリケーションを作成します。

npx create-react-app amplifytest

上記のコマンドの実行が完了したら、作成されたフォルダに移動します。

cd amplifytest

フォルダに移動したらアプリをスタートしてみます。

npm start

GitHubにリポジトリを作成する

GitHubのページに移動し、新たにリポジトリを作成します。 名前の欄にamplifytestと入力し、Create repositoryをクリックします。

ReactAppをGitにプッシュ

先ほど作成したReactAppをGitのリポジトリにプッシュします。

作成した新たなGitリポジトリのページに表示されているコマンドを参考に、Gitの設定を行います。

ターミナルでReactAppがあるフォルダを開いて、下記のコマンドを実行します。

echo "# amplifytest" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/{!!!ここは個人のアカウント名になります!!!!}/amplifytest.git
git push -u origin master

上記のコマンドを実行し、GitHubのページを更新してみると、下記のように様々なファイルが追加されている事が確認できます。

ReactAppを変更してみる

別にやる必要無いのですが、デフォルトのページだと面白みが無いので、ページを変更してみようと思います。

先ほどReactAppを作成したファルダ内のsrc/app.jsを編集していきます。

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Amplifyを確認するために作成したアプリです！
        </p>
        <p>
          しっかりと動いてくれるかドキドキ！
        </p>
      </header>
    </div>
  );
}

export default App;

下記コマンドでGitに変更点をプッシュします。

git add src/App.js
git commit -m "Modify App.js"
git push -u origin HEAD

デプロイ方法

Amplifyページを開く

AWSマネジメントコンソールでAmplifyと検索し、サービスのページを開きます。

開始ボタンを押す

Build scalable cloud-powered appsと記載されている方は、モバイルやWeb開発を簡素化するためのCLI（コマンドラインインターフェイス）とライブラリを提供してくれるサービスです。

Build, deploy, and host modern web appsと記載されている方は、Gitリポジトリを接続して、フロントとバックエンドを継続的にデプロイする事ができます。 グローバルなCDNでホストしてくれるので、可用性もバッチリです。

今回は、Build, deploy, and host modern web appsのGET STARTEDをクリックします。

Gitリポジトリのサービス選択

今回はGitHubからデプロイしたいので、GitHubを選択して、Continueをクリックします。

GitHubとの連携の画面が表示されたら、Authorize aws-amplify-consoleをクリックします。

レジストリ・ブランチの選択

認証が完了したら、デプロイしたいリポジトリとブランチを選択します。

ビルド設定の構成

アプリの名前を入力します。 今回はデフォルトの設定を利用します。

確認

今まで設定してきた項目を確認し、保存してデプロイをクリックします。

上部にアプリの作成中が進行している旨が表示されます。

下記のように検証の部分にチェックが付けばデプロイが完了しています。

https://<branchname>.<appid>.amplifyapp.comにデプロイされています。 左下のリンクをクリックしてみましょう！

先ほど作成したReactAppにアクセスできるようになっています！

コードの変更を自動的にデプロイする

ターミナルで自分のパソコンのReactAppのフォルダに移動します。

src/App.jsの内容を変更します。

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Amplifyを確認するために作成したアプリです！
        </p>
        <p>
          しっかりと動いてくれました(^○^)！
        </p>
      </header>
    </div>
  );
}

export default App;

変更完了したら、GitHubのリポジトリへプッシュします。 ターミナルで以下のコマンドを実行してください。

git add src/App.js
git commit -m "Change Comment"
git push -u origin HEAD

変更後のAmplifyの確認

Gitへ変更点をプッシュしたら、Amplifyの管理画面を更新してみましょう。

下記のように、自動的に、プロビジョンから実行され、ビルドされています。

検証まで終了したら、再度ページを開いてみましょう！

内容が更新されました！

後始末

Amplifyの管理画面の右上に表示されている、アクションから、アプリの削除を選択します。

「削除する場合は、deleteと入力してください」と言われるので、deleteと入力して、deleteボタンをクリックします。

下の図のように削除された旨が表示されたら正常に削除されています。

デプロイの確認は以上になります。

まとめ

とても簡単にReact Appをデプロイする事ができました。
こんなに簡単にデプロイできるなら、Webアプリを作るのが楽しくなりそうです。

すぐに削除する事ができるので、一旦、試しに作成してみるのも簡単にできると感じました。
今度は、しっかりしたReact Appのデプロイにチャレンジしてみようと思います。