FargateをCPUやメモリなどの標準メトリクスでオートスケールさせると、CloudWatchにメトリクスが送られるまで1~2分程度の遅延が発生すると思います。

さらにCloudWatchアラームでの評価に1分程度かかり

さらにコンテナ起動まで（オートスケール完了まで）1~2分程度かかります。

そのため、オートスケールを設定していてもスケールまで5分程度かかります。

このままですと急なアクセス増に対応できないため、オートスケールの時間を減らしたいと思います！！

どのようにオートスケールを早くするか

以下のような感じで対応していきます。

1. コンテナからカスタムメトリクスの空きスレッド数をCloudWatchへ送る
2. Fargateのタスク定義・クラスター・サービスを作成
3. CloudWatchアラームで高解像度の監視をする
4. アラームに応じてFargateのオートスケールをする

これで、1~3分程度でスケール可能となります。（起動の時間がアプリケーションによって異なると思いますが、大体この範囲に収まると思います！）

やってみる！

RailsコンテナからカスタムメトリクスをCloudWatchへ送る

Gemfileの修正

以下を追記します。

gem 'aws-sdk-cloudwatch'

cloudwatch_metrics.rbの作成

「config/initializers/cloudwatch_metrics.rb」を以下の内容で作成します。

# config/initializers/cloudwatch_puma_metrics.rb
require 'aws-sdk-cloudwatch'
require 'net/http'
require 'json'

CLOUDWATCH = Aws::CloudWatch::Client.new(region: 'ap-northeast-1')


Thread.new do
  loop do
    begin
      sleep 10
      Rails.logger.info("Sending Puma metrics to CloudWatch")
      uri = URI('http://127.0.0.1:9293/stats')
      res = Net::HTTP.start(uri.host, uri.port, open_timeout: 1, read_timeout: 1) do |http|
        http.get(uri.request_uri)
      end

      stats = JSON.parse(res.body)
      Rails.logger.info(stats.inspect)
      capacity = stats['pool_capacity']

      CLOUDWATCH.put_metric_data(
        namespace: 'Custom/Puma',
        metric_data: [
          {
            metric_name: 'ThreadPoolCapacity',
            value: capacity,
            unit: 'Count',
            storage_resolution: 1,
            dimensions: [
              { name: 'Cluster', value: ENV['ECS_CLUSTER'] || 'default' },
              { name: 'Service', value: ENV['ECS_SERVICE_NAME'] || 'rails' }
            ]
          }
        ]
      )
     
    rescue => e
      Rails.logger.error("CloudWatch Puma metric error: #{e.class}: #{e.message}")
    end
  end
end

lib/request_counter.rbの作成

lib/request_counter.rbを以下の内容で作成します。

class RequestCounter
  def initialize(app)
    @app = app
  end

  def call(env)
    REQUEST_COUNTER.increment
    @app.call(env)
  end
end

config/puma.rbの編集

config/puma.rbに以下を追記します。

activate_control_app 'tcp://127.0.0.1:9293', { no_token: true }

RailsのコンテナイメージをECRにPush

以下のコマンドで、AWSの接続設定をしておきます。

aws configure

次にECRログインします。

aws ecr get-login-password --region ap-northeast-1 | docker login --username AWS --password-stdin {AWSアカウントID}.dkr.ecr.ap-northeast-1.amazonaws.com

以下のコマンドでリポジトリを作成します。

aws ecr create-repository \
        --repository-name rails \
        --image-scanning-configuration scanOnPush=true \
        --region ap-northeast-1

Railsアプリのタグ作成します

docker tag rails-demo:latest {AWSアカウントID}.dkr.ecr.ap-northeast-1.amazonaws.com/rails:latest

Railsアプリのpushです

docker push {AWSアカウントID}.dkr.ecr.ap-northeast-1.amazonaws.com/rails:latest

Fargateのタスク定義・クラスター・サービスの作成

タスク定義

以下の設定でタスク定義を作成します。

• イメージ URIにECRのURI
• コンテナポートを3000

クラスター

以下の設定でクラスターを作成します。

• コンピューティングキャパシティの取得方法を選択でfargateのみを選択

サービス

以下の設定でサービスを作成します。

• タスク定義ファミリーで作成したタスク定義を指定
• ロードバランシング – オプション
  • ロードバランシングを使用にチェック
  • 新しいロードバランサーの作成にチェック
  • 新しいリスナーを作成にチェック
  • 新しいターゲットグループの作成にチェック
    • ポートは3000に設定

CloudWatchアラームで高解像度の監視をする

アラームの作成を以下の設定で作成します

• メトリクス：ThreadPoolCapacity
• 統計：最小
• 期間：10秒
• 条件
  • ThreadPoolCapacityが３より小さい

アラームに応じてFargateのオートスケールをする

Fargateのサービスの画面からサービスの自動スケーリングの設定をします。以下のような流れで設定します。

1. スケーリングポリシーを作成
2. ステップスケーリングを指定
3. カスタムオプションを指定
4. スケールアウトを指定

5. CloudWatch アラームで作成したアラームを指定

   1. 「調整」でスケールするタスク数などを指定

動作確認

JmeterでロードバランサのエンドポイントにHTTPリクエストを送りアラーム状態にすると、90秒程度でコンテナ起動する（ロードバランサのターゲットに登録されるところまで90秒程度）ことが確認できました。

通常5分程度かかるスケーリングが90秒程度でできたので効果ありと思っています。

なお、本検証は以下のSOCI対策を入れた状態で行いました！

AWS ECS-FagateをSeekable OCIを使って高速起動してみる

AWS ECS-FagateをSeekable OCIを使って高速起動してみます。 AWS SOCI (Seekable OCI) は、Fargateのコンテナ起動時間を短縮するための技術です。 Railsのような比較的大きなイメージ（数百

it.kensan.net

AWS SOCI (Seekable OCI) は、Fargateのコンテナ起動時間を短縮するための技術です。

Railsのような比較的大きなイメージ（数百MB〜1GB）を使う場合、従来は「イメージの全ダウンロード完了」を待ってから起動していましたが、Seekable OCIを使うと「必要な部分だけ先にダウンロードして即起動（Lazy Loading）」が可能になります。

今回は「ECRにプッシュしたら勝手にインデックスを作ってくれる仕組み（Lambda）」 を用意して、実際にコンテナを立ち上げてみます。

Seekable OCIを使ってみる

「ECRにプッシュしたら勝手にインデックスを作ってくれる仕組み（Lambda）」 は、AWS SOCI Index BuilderというAWS公式のCloudFomaritonテンプレートが用意されています。

これを使って「ECRにプッシュしたら勝手にインデックスを作ってくれる仕組み（Lambda）」 を構築します。

「ECRにプッシュしたら勝手にインデックスを作ってくれる仕組み（Lambda）」の構築

以下のCloudFormationファイルを使用します。

https://aws-quickstart.s3.us-east-1.amazonaws.com/cfn-ecr-aws-soci-index-builder/templates/SociIndexBuilder.yml

aws-quickstart.s3.us-east-1.amazonaws.com

以下のようにスタック作成してリソースを作成します。（パラメータは必要に応じて変更）

今回はRails8.1のコンテナイメージをPushしてみます。

Railsコンテナイメージの作成

ローカルにRailsインストールして、Railsアプリを作成してみます。

以下のコマンドでRailsインストール

sudo gem install rails

以下のコマンドでRailsアプリ作成して、作成したディレクトリに移動

rails new my-app
cd my-app

バージョン確認

rails -v
Rails 8.1.1

Dockerfileも作成されているので「vi Dockerfile」で確認できます。

今回はテスト用なので、Dockerfileを以下のように変更します。

「ENV RAILS_ENV="production"」をコメントアウトして、「ENV RAILS_ENV=development」を追記します。
#ENV RAILS_ENV="production" \
ENV RAILS_ENV=development\

以下のようにENTRYPOINTをコメントアウト
#ENTRYPOINT ["/rails/bin/docker-entrypoint"]

以下のようにEXPOSEとCMDを変更
#EXPOSE 80
#CMD ["./bin/thrust", "./bin/rails", "server"]

EXPOSE 3000
CMD ["bundle", "exec", "puma", "-C", "config/puma.rb"]

config/environments/development.rbに以下を追記します。これがないとFargateで確認時にエラーになります。

config.hosts.clear

コンテナイメージの動作確認

まずはビルドします。

docker build -t rails-demo .

次にコンテナ起動です。

docker run -d -p 3000:3000 \
  -e RAILS_MASTER_KEY=$(cat config/master.key) \
  --name my-app \
  rails-demo

http://localhost:3000/にアクセスして以下のwelcome画面が出ればokです。

Rails8.1のコンテナイメージをECRにPush

以下のコマンドで、AWSの接続設定をしておきます。

aws configure

次にECRログインします。

aws ecr get-login-password --region ap-northeast-1 | docker login --username AWS --password-stdin {AWSアカウントID}.dkr.ecr.ap-northeast-1.amazonaws.com

以下のコマンドでリポジトリを作成します。

aws ecr create-repository \
        --repository-name rails \
        --image-scanning-configuration scanOnPush=true \
        --region ap-northeast-1

Railsアプリのタグ作成します

docker tag rails-demo:latest {AWSアカウントID}.dkr.ecr.ap-northeast-1.amazonaws.com/rails:latest

Railsアプリのpushです

docker push {AWSアカウントID}.dkr.ecr.ap-northeast-1.amazonaws.com/rails:latest

Push結果

Pushしてしばらくすると、以下のようにECRにSoci Indexが追加されます。

このSoci Indexがコンテナ立ち上げを高速化してくれます。

ECS-Fargateでコンテナを立ち上げてみる

ECS-Fargateの設定は以下をご参照ください

Rails7.1をfargateで動かしてみる

Rails7.1をECS(Amazon Elastic Container Service)-Fagateにデプロイします！！！ 以下の順で進めていきます。今回はとりあえずFargate上で動くことをゴールにしますので、MySQLは使いませ

it.kensan.net

コンテナのパブリックIPにアクセスして以下のように表示されればOKです。

起動時間を見てみる

Seekable OCIの場合

以下のコマンドで確認します。

aws ecs describe-tasks \
  --cluster <クラスター名> \
  --tasks <タスクID> \
  --query "tasks[0].{CreatedAt:createdAt, PullStarted:pullStartedAt, PullStopped:pullStoppedAt, StartedAt:startedAt}"

以下の結果が返ってきました。

{
    "CreatedAt": "2025-12-28T10:39:06.054000+09:00",
    "PullStarted": "2025-12-28T10:39:17.362000+09:00",
    "PullStopped": "2025-12-28T10:39:27.310000+09:00",
    "StartedAt": "2025-12-28T10:39:28.900000+09:00"
}

作成からスタートまで21秒程度です。

Seekable OCIなしの場合

Seekable OCIなしの場合は以下の結果でした。

{
    "CreatedAt": "2025-12-28T10:35:07.750000+09:00",
    "PullStarted": "2025-12-28T10:35:22.546000+09:00",
    "PullStopped": "2025-12-28T10:35:34.311000+09:00",
    "StartedAt": "2025-12-28T10:35:37.096000+09:00"
}

作成からスタートまで30秒です。

まとめ

Seekable OCIでコンテナ起動の高速化をやってみました。

実際の本番運用するRailsアプリでどのくらい高速化するかやってみたいと思います！

私はassetsファイルなどの静的ファイルをサーバで配信することが多いのですが、本当はS3において、さらにCloudFrontなどのCDNでキャッシュした方が良いよなと思っていました。

が、、ちょっと面倒で後回しになっていたので、実際にサーバ負荷を確認して、静的ファイルをS3に移動させる労力に見合う結果が得られそうか確認したいと思います。

今回の検証では、サーバはECS Fargateで、1vCPU/2GBを使います。

ECS Fargateは以下の記事のようにたてられます。

AWS ECS-Fagate-Express モードで簡単にコンテナアプリケーションをデプロイしてみる

AWS ECS-Fagate-Express モードで簡単にコンテナアプリケーションをデプロイしてみます！ ECS-Fagate-Express モードでは以下のような設定が簡単に行えます。 ACM ALB ECS オートスケール設定 以下

it.kensan.net

assets/images配下に、100KBの画像を格納して、その画像ファイルにjmeterで大量アクセスした際の負荷を検証してみます。

準備

以下のようにFargateコンテナを立ち上げます。

AWS ECS-Fagate-Express モードで簡単にコンテナアプリケーションをデプロイしてみる

AWS ECS-Fagate-Express モードで簡単にコンテナアプリケーションをデプロイしてみます！ ECS-Fagate-Express モードでは以下のような設定が簡単に行えます。 ACM ALB ECS オートスケール設定 以下

it.kensan.net

assets/images配下に100KBの画像を格納します。

以下のコマンドでビルドします。

docker build -t rails-demo .

以下のコマンドでコンテナ起動します。

docker run -d -p 3000:3000 \
  -e RAILS_MASTER_KEY=$(cat config/master.key) \
  --name my-app \
  rails-demo

100KBの画像のパスを取得するため、コンテナにbashで入ります

＜コンテナID確認＞
docker ps -a
＜コンテナにbashではいる＞
docker exec -it {コンテナID} /bin/bash

以下のコマンドでパスを取得できます。

bundle exec rails c
helper.asset_url("100KB.png")

jmeter準備

macの場合以下のコマンドでインストールできます

brew install jmeter

インストールしたら

jmeter

とターミナルに打ち込むとjmeterが起動します。

jmeter設定

以下の設定で1分間かけて50スレッド立ち上がるようにします。そのあとは4分間継続して負荷を描けます

Thread Group
  Number of Threads:50
  Ramp-up:60
  Duration:300

Constant Throughput Timer
 Target throughput:3000

HTTP Request
  protocol:https
  Server Name or ip:ECSのドメイン
  Path:{helper.asset_url("100KB.png")の結果}

14%とそれほど高いとも言えず、何とも言えない結果ですが、利用者数が増えるほど無視できない負荷になることも考えられると思います。

そのため、以下のような対応が必要と思われます…!

• CloudFrontなどのCDNでのキャッシュ
• そもそもassetsファイルはS3などにおき、サーバにリクエストが来ないようにする
  • S3に置いたうえで、CDNでキャッシュもした方が良さそう

ECS-Fagate-Express モードでは以下のような設定が簡単に行えます。

• ACM
• ALB
• ECS
• オートスケール設定

以下の記事を試してみる感じです。

Amazon ECS Express Mode を使用して、インフラストラクチャを複雑化することなく、本番環境に対応したアプリケーションを構築 | Amazon Web Services

コンテナ化されたアプリケーションを本番環境にデプロイするには、ロードバランサー、自動スケーリングポリシー、ネッ

aws.amazon.com

ざっくり以下のような感じでECS-Fagate-Express モードを試してみます！

1. テスト用のコンテナイメージをECRにPush
   1. 試しにRails8.1のコンテナイメージをPushします
2. ECSコンソールに移動して、Expressモードを選択して、設定してみる

テスト用のコンテナイメージをECRにPush

テスト用のコンテナイメージをECRにPushします。

今回はRails8.1のコンテナイメージをPushします。

Railsコンテナイメージの作成

ローカルにRailsインストールして、Railsアプリを作成してみます。

以下のコマンドでRailsインストール

sudo gem install rails

以下のコマンドでRailsアプリ作成して、作成したディレクトリに移動

rails new my-app
cd my-app

バージョン確認

rails -v
Rails 8.1.1

Dockerfileも作成されているので「vi Dockerfile」で確認します。

以下のようになっていると思います。

# syntax=docker/dockerfile:1
# check=error=true

# This Dockerfile is designed for production, not development. Use with Kamal or build'n'run by hand:
# docker build -t my_app .
# docker run -d -p 80:80 -e RAILS_MASTER_KEY= --name my_app my_app

# For a containerized dev environment, see Dev Containers: https://guides.rubyonrails.org/getting_started_with_devcontainer.html

# Make sure RUBY_VERSION matches the Ruby version in .ruby-version
ARG RUBY_VERSION=3.4.2
FROM docker.io/library/ruby:$RUBY_VERSION-slim AS base

# Rails app lives here
WORKDIR /rails

# Install base packages
RUN apt-get update -qq && \
    apt-get install --no-install-recommends -y curl libjemalloc2 libvips sqlite3 && \
    ln -s /usr/lib/$(uname -m)-linux-gnu/libjemalloc.so.2 /usr/local/lib/libjemalloc.so && \
    rm -rf /var/lib/apt/lists /var/cache/apt/archives

# Set production environment variables and enable jemalloc for reduced memory usage and latency.
ENV RAILS_ENV="production" \
    BUNDLE_DEPLOYMENT="1" \
    BUNDLE_PATH="/usr/local/bundle" \
    BUNDLE_WITHOUT="development" \
    LD_PRELOAD="/usr/local/lib/libjemalloc.so"

# Throw-away build stage to reduce size of final image
FROM base AS build

# Install packages needed to build gems
RUN apt-get update -qq && \
    apt-get install --no-install-recommends -y build-essential git libyaml-dev pkg-config && \
    rm -rf /var/lib/apt/lists /var/cache/apt/archives

# Install application gems
COPY Gemfile Gemfile.lock vendor ./

RUN bundle install && \
    rm -rf ~/.bundle/ "${BUNDLE_PATH}"/ruby/*/cache "${BUNDLE_PATH}"/ruby/*/bundler/gems/*/.git && \
    # -j 1 disable parallel compilation to avoid a QEMU bug: https://github.com/rails/bootsnap/issues/495
    bundle exec bootsnap precompile -j 1 --gemfile

# Copy application code
COPY . .

# Precompile bootsnap code for faster boot times.
# -j 1 disable parallel compilation to avoid a QEMU bug: https://github.com/rails/bootsnap/issues/495
RUN bundle exec bootsnap precompile -j 1 app/ lib/

# Precompiling assets for production without requiring secret RAILS_MASTER_KEY
RUN SECRET_KEY_BASE_DUMMY=1 ./bin/rails assets:precompile




# Final stage for app image
FROM base

# Run and own only the runtime files as a non-root user for security
RUN groupadd --system --gid 1000 rails && \
    useradd rails --uid 1000 --gid 1000 --create-home --shell /bin/bash
USER 1000:1000

# Copy built artifacts: gems, application
COPY --chown=rails:rails --from=build "${BUNDLE_PATH}" "${BUNDLE_PATH}"
COPY --chown=rails:rails --from=build /rails /rails

# Entrypoint prepares the database.
ENTRYPOINT ["/rails/bin/docker-entrypoint"]

# Start server via Thruster by default, this can be overwritten at runtime
EXPOSE 80
CMD ["./bin/thrust", "./bin/rails", "server"]

今回はテスト用なので、Dockerfileを以下のように変更します。

「ENV RAILS_ENV="production"」をコメントアウトして、「ENV RAILS_ENV=development」を追記します。
#ENV RAILS_ENV="production" \
ENV RAILS_ENV=development\

以下のようにENTRYPOINTをコメントアウト
#ENTRYPOINT ["/rails/bin/docker-entrypoint"]

以下のようにEXPOSEとCMDを変更
#EXPOSE 80
#CMD ["./bin/thrust", "./bin/rails", "server"]

EXPOSE 3000
CMD ["bundle", "exec", "puma", "-C", "config/puma.rb"]

config/environments/development.rbに以下を追記します。これがないとFargateで確認時にエラーになります。

config.hosts.clear

コンテナイメージの動作確認

まずはビルドします。

docker build -t rails-demo .

次にコンテナ起動です。

docker run -d -p 3000:3000 \
  -e RAILS_MASTER_KEY=$(cat config/master.key) \
  --name my-app \
  rails-demo

http://localhost:3000/にアクセスして以下のwelcome画面が出ればokです。

Rails8.1のコンテナイメージをECRにPush

以下のコマンドで、AWSの接続設定をしておきます。

aws configure

次にECRログインします。

aws ecr get-login-password --region ap-northeast-1 | docker login --username AWS --password-stdin {AWSアカウントID}.dkr.ecr.ap-northeast-1.amazonaws.com

以下のコマンドでリポジトリを作成します。

aws ecr create-repository \
        --repository-name rails \
        --image-scanning-configuration scanOnPush=true \
        --region ap-northeast-1

Railsアプリのタグ作成します

docker tag rails-demo:latest {AWSアカウントID}.dkr.ecr.ap-northeast-1.amazonaws.com/rails:latest

Railsアプリのpushです

docker push {AWSアカウントID}.dkr.ecr.ap-northeast-1.amazonaws.com/rails:latest

ECSコンソールに移動して、Expressモードを選択して、設定してみる

1. ECSコンソールに移動します
2. Expressモードを選択します
   1. イメージ URIでは先ほどpushしたECRのイメージを選択します
   2. その他の設定のコンテナポートは3000を指定します。
3. 作成ボタン押下

Expressモードで作成時はCPUアーキテクチャを設定できないようです。

ARMを使う場合は、作成後にタスク定義からCPUアーキテクチャを変更する必要あがあります。

動作確認

ECSコンソールのアプリケーション URLにアクセスすると以下のようにRailsが起動できました！

以下のようにオートスケールも自動的に設定されています。

素晴らしいー

その１　基本ログ：デバッグの最初の一歩

console.logは、変数や関数の結果を確認する基本的な方法です。コードがどのように動作しているかを追跡するのに便利です。

例:

const userName = "Alice";
console.log("User Name:", userName); // User Name: Alice

ポイント:

• 複数の値をカンマで区切ることで、コンパクトに情報を表示可能。
• エラーが発生している箇所を特定するための第一歩として役立つ。
• console.error()やconsole.warn()を使うと強調できたりする

その２　フォーマットログ：スタイリッシュな出力

文字列にスタイルを適用して、ログを視覚的に整理できます。%cを使ってカスタマイズするのがコツです。

例:

console.log("%cSuccess!", "color: green; font-size: 16px; font-weight: bold;");
console.log("%cWarning!", "color: orange; font-size: 16px; font-weight: bold;");
console.log("%cError!", "color: red; font-size: 16px; font-weight: bold;");

• テキストに色やフォントスタイルを加えることで、重要なメッセージを強調。
• 特に、成功・警告・エラーのログを視覚的に区別するのに便利。

その３　 オブジェクトログ：構造化データの確認

オブジェクトや配列を出力するときは、console.logで構造化されたビューを得られます。console.tableを使うとさらに見やすくなります。

例:

const users = [
  { id: 1, name: "Alice", age: 25 },
  { id: 2, name: "Bob", age: 30 },
  { id: 3, name: "Charlie", age: 35 },
];

console.log("User List:", users); // 標準的なオブジェクト表示
console.table(users); // テーブル形式で表示

以下、console.table実行結果です。

ポイント:

• console.tableはデータを表形式で表示するため、リストや配列の中身を確認するのに最適。
• APIレスポンスやデバッグで大活躍。

まずはDockerでお勉強環境（動作確認する環境）を作ります。

環境構築

必要なファイルの作成

Dockerfileを以下の内容で作ります。

FROM node:20
# パッケージリストを更新し、vimをインストール
RUN apt-get update && apt-get install -y vim && apt-get clean
WORKDIR /app

次にdocker-compose.ymlを以下の内容で作ります。

services:
  node-dev:
    build: 
      context: .
      dockerfile: Dockerfile
    tty: true
    volumes:
      - .:/app

コンテナを立ち上げ、必要なもののインストール

コンテナを立ち上げ

docker compose up -d

コンテナの中に入り

docker compose exec node-dev bash

必要なものをインストールします。

npm install typescript ts-node ts-node-dev
# tsconfig.jsonファイルを作成
npx tsc --init

動作確認

test.tsファイルを作成し「console.log(‘test’)」と記載して、以下のコマンドで実行できます。

npx ts-node test.ts

Dockerファイルの修正

Dockerfileでpackage.jsonを参照して必要なもののインストールをするように修正します。

FROM node:20
# パッケージリストを更新し、vimをインストール
RUN apt-get update && apt-get install -y vim && apt-get clean
COPY package*.json ./
RUN npm install
WORKDIR /app

再度、コンテナを立ち上げ

docker compose up -d

コンテナの中に入り

docker compose exec node-dev bash

動作確認

npx ts-node test.ts

これでお勉強の準備完了です。

型定義を試してみる

TypeScriptといえば、型定義ということで、型定義の勉強をしてみます。

基本の型定義

以下の基本となる型定義を試してみます。

const 変数名: 型 = 値;

文字列に文字列を入れてみる

const name1: string = "ABC";
console.log(name1);
→ABCが出力される

文字列に数値を入れてみるとエラーになります。

const name2: string = 1; 
console.log(name2);
→エラー

anyにすると何でも入れられちゃいます。

const name1: any = "ABC";
console.log(name1);
→ABCが出力される

const name2: any = 1;
console.log(name2);
→1が出力される

オブジェクト

オブジェクトの場合、以下のように定義します。

const item: {
    id: number,
    name: string
} = {
    id: 1,
    name: "ABC"
}
console.log(item);
→{ id: 1, name: 'ABC' }が出力される

以下のように一部の定義を使用しないとエラーになります。

const item: {
    id: number,
    name: string
} = {
    id: 1
}
console.log(item);

オプションパラメーターのハテナマークをつけておくと、定義しなくてもエラーになりません。

const item: {
    id: number,
    name?: string
} = {
    id: 1
}
console.log(item);
→{ id: 1 }が出力される

オプションパラメーターのハテナマークをつけておくと、undefinedを設定することも可能です。

const item: {
    id: number,
    name?: string
} = {
    id: 1,
    name: undefined
}
console.log(item);
→{ id: 1, name: undefined }が出力される

ちなみに、オプションパラメーターをつけないとエラーになります。

const item: {
    id: number,
    name: string
} = {
    id: 1,
    name: undefined
}
console.log(item);
→エラーになる

ジェネリクスが使える

ジェネリクスとは「抽象化されたデータ型」を表現する機能

実際に利用される時に、型を確定させるという使い方が可能です。

型だけが違う同じ機能を持つ関数やクラスは、ジェネリクスで1つ用意しておくことで、再利用性ができ、ソースコードの保守性が増します。

let getArray = <T>(value: T): T[] => { // <T>という抽象的な型を宣言
  return [value, value, value];
};

console.log(getArray<number>(1)); // 実行時に<T>の部分に型を指定してあげる

Tips

以下、TypeScriptでもJavaScriptでも使えそうなTips

デバッグ

console.logで変数名を記載してあげると、ログ出力時にどの変数のログかが分かるので便利です。

const item: {
    id: number,
    name?: string
} = {
    id: 1,
    name: undefined
}
console.log("item", item);
→item { id: 1, name: undefined }と出力される

文字列操作

` を使って文字列を囲むことで、${} を使えます。${} の中には、変数や式などを埋め込めます。

const name1: String = 'taro'
const test: String = `I am ${name1}.`
console.log(test)
→I am taro.と出力される

数値も入れられちゃいます

const name1: Number = 1 
const test: String = `I am ${name1}.`
console.log(test)
→I am 1.と出力されます

まとめ

TypeScriptの勉強をDocker環境でやってみました！！

↓Value-Authとは↓

本人認証とは、ログイン時にSMS・メールで認証番号を送信し、 その番号によって本人であることを確認するサービスです。
この本人認証が、Value-Authでは0円で簡単に始められます。

Value-Authで本人認証を始めるまでの流れ

1. 申込会員登録
2. Value-Authのアカウント作成
3. Value-Authにログイン
4. APIキー発行
   1. APIキーはどこかにメモしておく
5. サイト登録
6. 以下のWordPressプラグインをインストール
   1. https://www.value-domain.com/security/value-auth/flow/#cms
7. WordPress プラグインの設定
   1. APIキー、認証コードを設定
   2. 2段階認証をONにする
   3. 電話番号かメールアドレスを設定する

Value-Authでの本人認証をWordPresに設定してみる

Step1　申込会員登録

以下のリンクから会員登録します。

Step2　Value-Authのアカウント作成

以下のメニューからアカウントを作成します。

Step3　Value-Authにログイン

アカウントを作成するとログインボタンが表示されますので、クリックしてログインします。

Step4　APIキー発行

Value-Authのログイン後の画面でAPIキーを発行し、発行されたAPIキーをメモしておきます。

APIキーはWordPress設定時に使用します。

Step5　サイト登録

Value-Authのログイン後の画面で、サイト名とホスト名を指定してサイト登録します。

これで、Value-Auth側の設定は完了です。残りはWordPressの設定です。

Step6　WordPressプラグインをインストール

以下のURLからWordPressプラグインをダウンロードします。

ご利用の流れ | Value-Auth（バリューオース）

Value-Authのご利用の流れページです。Value-Authは、SMSなど複数の本人認証を無料で導入でき、お客様のサービスやアプリへの設置も簡単なサービスです。

www.value-domain.com

ダウンロードしたプラグインをアップロードします。

↓プラグイン画面の新規プラグインを追加を押下↓

プラグインのアップロードボタンを押下すると↓アップロード画面↓が表示されます。

Step7　プラグインの設定

追加したプラグインの設定画面を開き以下を設定します。

1. 1. APIキー、認証コードを設定（Value-Authから発行される値）
   2. 2段階認証をONにする
   3. 電話番号かメールアドレスを設定する

動作確認

ログインすると、以下の画面が表示されます！

メールアドレスまたはSMSで通知された認証コードを入力すると、ログイン成功します！

まとめ

WordPressセキュリティ対策として、Value-Authを使用して、WordPress管理画面にログイン際に本人認証を追加してみました！

↓Value-Authはこちらから始められます！↓

無料でWordPressを使えるということです！

↓スターレンタルサーバーの申し込みはこちらから↓

スターレンタルサーバー(Star Server)のフリープランの特徴

スターレンタルサーバーはこんなサーバーだよというのを記載していきます。

• 容量
  • ３GB
• 初期費用
  • 0円
• 月額費用
  • 0円
• WordPressが使える
  • しかも複数のWordPressをインストールできる（複数のサイト構築ができる）
• 無料独自SSLも使える

要するに、0円でWordPressが使えてSSL（httpsでのアクセス）に対応しています。

しかも複数サイトの構築ができます！！

スターレンタルサーバー(Star Server)のフリープランの注意点

スターレンタルサーバーの注意点を記載していきます。

• 容量が3GBと少し少なめ
• 3ヶ月ごとに契約更新の手続きが必要となる

容量は少し少なめなものの、試しに初めてみるという方には十分かと思います。

また、3ヶ月ごとに更新が必要となるので、忘れずに更新しましょ！

実際にスターレンタルサーバーを使ってみる

まずは契約からです。

スターレンタルサーバーのフリープラン契約

以下からフリープランの契約が可能です。

WordPressのインストール

スターレンタルサーバーのサーバーパネルからWordPressをインストールできます。

以下の画面の赤線の上をクリックすればインストール画面に進めます。

次にWordPressを追加ボタンを押下します。

WordPress簡単インストール画面が出てくるので、ブログ名/ユーザ名/パスワード/メールアドレスは必須なので入力します。それ以外の項目は、お好みの設定をして「インストールする」ボタンを押下します。(ブログ名/ユーザ名/パスワード/メールアドレス以外は特に変更なしでもOKです。)

「インストールする」ボタンを押下後、しばらくすると出来上がったWordPress画面にアクセスできます。

サイトアクセスして以下の表示がされた場合には、しばらく待ってから再度アクセスするとWordPress画面にアクセスできます。

無効なURLです。
プログラム設定の反映待ちである可能性があります。
しばらく時間をおいて再度アクセスをお試しください。

作成したサイトにアクセスしてみる

作成したサイトにアクセスして、以下のようにWordPressの画面が表示されれば成功です。

SSL化してみる

サーバーパネルからSSL設定を押下して、SSL設定状況をONにするとSSL化完了です！

これでhttpsで作成したサイトにアクセスできます。

使ってみてよかったこと

簡単な画面操作のみで、複数サイト作成できて、SSL化できるというのがかなり便利かと思いました！！初心者でも簡単にサイト作成が可能で、しかも無料です。

また、WordPressで有名な（よく使われている）テーマのCocoonをスターレンタルサーバー管理画面から簡単にインストールできます。

まとめ

スターレンタルサーバー(Star Server)のフリープランを試してみました。

無料で複数サイト作成できて（複数WordPressをインストールできて）、SSL化まで無料でできました！！

素晴らしいスターレンタルサーバー！！

↓申し込みはこちらから↓

スターアカウント ユーザーコミュニティ

スターアカウントのコミュニティサイトです。スターアカウントのサービスや利用に関するお悩みを、コミュニティのユーザー同士で相談できます。

community.star.ne.jp

入力できませんでしたが、現在は入力できるようになったようです！

塗り潰しだらけでわかりづらいと思いますが、「_」アンダーバー入力できています！！

↓申し込みはこちらから↓

ライトではWordPressを簡単にインストールできるのですが、エコノミープランではWordPressをインストールできないため、ひと手間かけて配信することになります。

できるだけ安くということで、エコノミープランを使いたい方向けの記事です。

実現方法ですが、以下の流れで「ロリポップ！」レンタルサーバーのエコノミープランで配信していきます。

1. 自分のPCでWordPressのコンテンツを作成
2. 作成したコンテンツをHTML形式でエクスポート
3. エクスポートしたHTMLを「ロリポップ！」レンタルサーバーのエコノミープランで配信

↓「ロリポップ！」レンタルサーバーの申し込みはこちらから↓

では早速WordPressコンテンツを「ロリポップ！」レンタルサーバーのエコノミープランで配信していきます。

自分のPCでWordPressのコンテンツを作成

自分のPCにWordPressをインストールする

「Local」を使用するとこで簡単に自分のPCにWordPressをインストールできます。

WindowsでもmacOSでも使えます。

以下のURLから「Local」をダウンロードしてインストールします。

Local

localwp.com

次はWordPress管理画面にアクセスして、WordPressの設定をします。

WordPressの設定

まずは、パーマリンク設定から行います。

Word Pressのパーマリンク設定の変更

WordPress管理画面の設定->パーマリンク画面を開き、カスタム構造を選択し、「/%postname%.html」を入力します。

次は、staticpress2019プラグインの設定をします。

WordPressのstaticpress2019プラグインを設定

WordPress の管理画面［プラグイン］-［新規追加］から「staticpress2019」をインストールして有効化します。

「staticpress2019」設定画面を開き、以下の2点設定します。

• Static URLに「ロリポップ！」から払い出されたドメインを入力
• Save DIRに作成したコンテンツをエクスポートするディレクトリを指定

次はHTML形式でエクスポートします！

作成したコンテンツをHTML形式でエクスポート

StaticPress2019を使ってエクスポートします。

staticpress2019でWordPressのコンテンツをHTMLファイルとして出力

インストールした「staticpress2019」の画面で「再構築」ボタンを押下します。これだけです。

では、ロリポップサーバーで配信してみます！

エクスポートしたHTMLを「ロリポップ！」レンタルサーバーのエコノミープランで配信

まずFTPでロリポップサーバにHTMLをアップロードします。

ロリポップサーバーにHTMLをアップロード

以下のロリポップメニューからFTPを起動します。

エクスポートされたファイルを全てアップロードします。

結構ファイル数多いと思うので、以下を参考にFTPソフトを使う方がいいかもです！

各種FTPソフトの設定方法 - ロリポップ！レンタルサーバー

ロリポップ！レンタルサーバーのご利用マニュアル FTPソフトの設定を説明したマニュアルページです。

lolipop.jp

動作確認

「ロリポップ！」から払い出されたドメインにアクセスして以下のように画面表示できれば成功です。

↓「ロリポップ！」レンタルサーバーの申し込みはこちらから↓

まとめ

「ロリポップ！」レンタルサーバーのエコノミープランでWordPressのコンテンツを配信してみました。

少しでも安くwordpressコンテンツを配信したい方のお役に立てば….!

↓「ロリポップ！」レンタルサーバーの申し込みはこちらから↓