当サイトではIT・Web系技術、メタバースなどの情報提供を目的とします。
個人的な技術ブログなども投稿する予定です。

【AWS】WordPressをLightsail+CloudFrontに移行した話

こんにちは、ゆーろんです。 今回は今回はレンタルサーバで動いていた当ブログ(yuuronacademy.com)をAWSのLightSail上に移動(お引越し)させたので、そのことに関してお話ししようと思います。 目次 使用したAWSのサービス LightSail CloudFront Route53 ACM 構築したアーキテクチャ 構築にあたっての小話 使用サービス サービス システム 基盤環境 アクセス解析 今後に関して 使用したAWSのサービス まず、今回利用したAWSのサービスに関して簡単に説明します。 LightSail AWS LightSailはAWSが提供しているVPS(仮想プライベートサーバ)です。 仮想マシンのEC2と異なり、VPCやサブネット等の作成も不要で、月額料金なためコスト見積もりしやすい特徴があります。 CloudFront AWS CloudFrontはAWSが提供しているCDN(コンテンツデリバリネットワーク)です。 サイトコンテンツ(静的・動的なウェブコンテンツ、ビデオ、アプリケーションデータなど)をAWSの管理する世界中のエッジサーバに配置することで効率的にデータを配信することができます。 CDNとは キャッシュサーバなどで構成されたシステムを用いることによって、Webサイト上のコンテンツを迅速にユーザに届けるための仕組み。 通常のWebサイトでは、コンテンツを配信するためのサーバの処理能力やネットワークの帯域幅などの影響で、沢山のユーザーがWebサイトにアクセスするとレスポンスが低下する。 また、物理的に離れた場所からのアクセスに対してネットワーク遅延によりレスポンスが低下する場合がある。そういったものに対処するための仕組みといえる。 Route53 AWS Route53はAWSが提供しているDNS(Domain Name System)です。 Route53ではドメインの登録やDNS、ロードバランサの機能などサイトアクセスのための様々なDNS機能を提供しています。 ゆーろん Route53の名前の由来はDNSのポート番号が53だからなのかな? ACM AWS Certificate ManagerはAWSが提供しているSSL/TLS証明書のサービスです。 AWS上でホストされるウェブサイトやアプリケーションに対して、暗号化通信を実現するためのSSL/TLS証明書の取得、管理、自動更新を行うことができます。 構築したアーキテクチャ 今回AWSで構築したリソースのインフラ構成図は概ね以下の通りです。 見ての通りLIghtSail+CloudFrontの構成となっています。 HTTPS化にALBの利用などをする方法もありますが、料金を抑えるためにCloudFrontでSSL終端を行う構成にすることにしました。 SSL終端構成により「サーバへ直接クライアントのアクセスをさせない」、「CloudFrontによるキャッシュ/高速化」を実現しています。 またサイトへのアクセスステップは以下のようになっています。 HTTPSによるアクセス(:443) Route53 CloudFront(:80) Route53 Static IP(Lightsail) 構築にあたっての小話 サイトのインフラ基盤の管理にあたって当初Terraformを利用することを計画し、以下のように実行可能なコードを作成をしました。 GitHub - yuron3141/aws-lightsail-tf: This repo is to create the wp lightsail instance with the terraform. GitHub This repo is to create the wp lightsail instance with the terraform. - yuron3141/aws-lightsail-tf 上記コードをAWS Cloud9上で利用し.tfstateはS3で管理するというものです。

ITエンジニア性格診断のフロントエンドをアップデートしました

みなさんこんにちは。ゆーろんです。 今回は2022/5/12に公開したWEBアプリケーションである「ITエンジニア性格診断テスト」に関して本日(2022/12/15)に更新したので改良点の紹介がメインとなります。 また「ITエンジニア性格診断テスト」を開発しようと思ったきっかけ的なものも思い出しがてら記録しておきます。 目次 ITエンジニア性格診断テストとは 開発のきっかけ 今回の更新で改善した実装内容 今後の開発予定 ITエンジニア性格診断テストとは ITエンジニア性格診断は「WEBに関わるシステムやアプリの開発を行うエンジニア向けの性格診断」を提供するWEBアプリケーションです。 構想と内部設計に2日程、実装に4,5日かけて開発しました。フロントエンド部のデプロイ先はPaaSのNetlifyになっており、バックエンド部のデプロイ先はHerokuになっていました。 (2022年12月現在、HerokuにデプロイしたAPIサーバは削除済み(現在利用不能)) 大まかな機能としては10種類のエンジニアタイプを定義しておき、各質問への回答結果をもとににエンジニアタイプを判断し、その結果を表示すると言うものになります。なおバックエンドのサーバ機能にはデータベースへの回答登録機能とデータベース上の総計をGET Requestがきたら返すという機能が実装してありました。 開発のきっかけ もともと自分は性格診断に興味があり、ネット上で様々な診断アプリを受けていました。具体的には「データでわかる辛口性格診断」や「MBTI 無料性格診断テスト」など。 そんな中、記事をあさってる最中に「ITエンジニアにも複数のタイプがいる」的な内容が書かれてある記事を見つけました。それで「ITエンジニア版の性格診断テスト」があったら面白いのではないかと思い製作してみた次第です。 制作にあたって、ネット上の記事や各種SNSや技術ブログなどを回って、自分なりに10タイプのエンジニアを定義することとしました。そのため要件定義(仕様決定)には半日以上かかりました。 今回の更新で改善した実装内容 前回デプロイした5/12時点ではReactを触ってまだ4, 5日程度であり、実装されたコードの内容もかなり見にくく、Reactの仕様にも理解が不十分なまま実装したため、あまり設計の良い設計ができませんでした。 今回の更新では不十分だった質問設計とパラメータ(得点)の演算処理、そして結果文の大幅の見直しと訂正を行いました。またコードもかなり書き換え、統計情報の画面もかなり訂正しました。(このページはバックエンドのAPIサーバが用意されれば統計情報を表示できるものとなってます) 結果画面の各ポイントのパラメータ名と表示も下の画像のように書き換えました。 今後の開発予定 バックエンドのAPIサーバ(Rails駆動)はFireBaseに変える、つまりNodeベースにする予定です。 それにより「統計情報」の画面を提供できるようになると思います。 ここまでご覧くださりありがとうございました。

AWSで共用EC2を構築した話

こんにちは。ゆーろんです。 12/4に友人と共用で使用するAmazon EC2を作成しました。 苦労した部分や前回EC2を建てたときとの違いや新たな発見や実装内容を記録しておきます。 目次 インフラ構成図 今回の構築で新しく取り組めた内容 AWSに関して Linux(Amazon Linux)に関して まとめと反省点 インフラ構成図 今回作成したEC2のアーキテクチャ図は以下のような感じです。 以前EC2でマイクラサーバを構築した際はELBやCloudWatchは利用しませんでした。 今回の構築で新しく取り組めた内容 今回の構築ではNLBとFlow logを使用しました。 AWSに関して 私だけではなく友人もEC2を停止・起動、なお且つEC2に入れる必要があったため初めてIAMのユーザを作成しました。IAMユーザ(EC2と停止,起動のみの権限)の作成とセキュリティグループの設定は比較的スムーズにできました。 またNLBとFlow Logsをインフラ構築に導入した理由は、EC2へ入ってくる通信を監視するためです。これによりEC2にアクセスをAWSコンソール上で監視できるためです。 Linux(Amazon Linux)に関して EC2には当初「Ubuntu22.04LTS」を入れてましたが、このディストリビューションではssh-rsa がデフォルトで無効になっているためTeraTermでアクセスする際のRSA鍵がうまく認証されませんでした。 修正するにはPowershellからSSH接続で入り、ssh-rsaを有効にする必要がありましたが、それを知ったのは「Amazon Linux」に変えた後でした… 結局RSA鍵で詰まって、以前構成したEC2と同じくAmazon Linuxを入れました。 ちなみにAmazon LinuxはRedHat / CentOS7系のディストリビューションと言われています。そのためPackage管理コマンドはaptではなくyumになります。 また今回初めてLinuxOS内で他のユーザやRSA鍵を生成しました。これによりユーザごとのディレクトリにファイルやディレクトリが構築できるので個人性を持った開発ができると思います。 まとめと反省点 今回は以前EC2を建てたときよりも、インフラ構成やネットワークの知識、Linuxの操作を以前より意識して組むことができたと思います。 ただ構築とLinux内の設定に5,6時間かかってしまったので、もっとAWSやネットワークを理解そしてAWSコンソールに慣れていきたいと思います。 ここまでご覧くださり、ありがとうございました。

Vue.jsでリヴリーアイランドを再現した話

こんにちは。ゆーろんです。 JavaScriptの学習のためにいくつかフロントエンド完結のものやNode.jsベースのものを作成してきましたが、作成した中でユニークなものである「クラシックリヴリーアイランドの再現」の制作話や使用技術に関してまとめます。 リヴリーアイランドとは そもそも制作した「リヴリーアイランドの再現」といっても、リヴリーアイランド自体がよくわからない方もいると思うので解説します。 リヴリーアイランドは2002年にリリースされたブラウザで遊べるオンラインゲームです。 ブラウザ版の運営は株式会社ゲームポッドが運営していましたが、2019年末にサービス終了となりました。 現在(2022年)は株式会社COCONEにリヴリーアイランドに関する権利が譲渡され、2021年ごろにネイティブアプリとしてリヴリーアイランドがリリースされています。 上記の画像はネイティブアプリとしてリニューアルした際のデザインです。 制作の経緯 そんなリヴリーアイランドですが、私自身もかつてPC版を何年もプレイしていました。 あるときに、スマホ版(ネイティブアプリ)としてリヴリーアイランドがリリースされているのを知ったの同時に、以下のような記事を読みました。 Vue.jsを用いたWebゲームの作り方 - coconeのフロントエンド業務 cocone engineering はじめまして、ウェブ開発室で室長とフロントエンド業務を担当している髙山です。 気がつけばもう9月ですね。いやぁ早い。学生の皆さんは夏休みも終え、授業も始まっているのでしょうか?夏休みと言えば、宿題です... こちらの記事は現在スマホ版リヴリーアイランドの運営をされている株式会社COCONEさんのエンジニアの方が書いた記事です。 この記事を読んだことと、スマホ版リヴリーアイランドを私自身が認知したことで「JavaScriptでリヴリーアイランドの再現が作れるのでは?」と思い作ることにしました。