サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
nishinatoshiharu.com
前回、独自ドメインとローカルのWebアプリをつなげるプロキシサーバをnginxとDcokerで構築するでnginxを利用して独自ドメインでコンテナに接続する方法について紹介しました。 前回は接続対象のアプリケーションが1つだけでしたが、今回はサブドメインを利用して複数のアプリケーションに対応する方法について紹介します。 なお、localhost:3000でWebアプリケーションが、localhost:3001でAPIサーバが起動している前提とします。 今回は例としてhttp://web.local.example-dev.comにWebアプリケーション、http://api.local.example-dev.comでAPIサーバに接続することをゴールとします。 下準備 ローカル環境の/etc/hostsを編集する localhostは127.0.0.1を指すホスト名です。 任意のドメイン
ブラウザからサーバにリクエストが届く SSRに必要なPropsをリクエストする Propsを取得する SSRを実行する ブラウザにHTMLでレスポンスを返す ブラウザ上でCSRを実行する レンダリング結果をマウントする マウント後、ブラウザ上で副作用を実行する 以下ではそれぞれの過程について解説をします。 ブラウザからサーバにリクエストが届く ブラウザでURLにアクセスをするとサーバにリクエストが届きます。 SSRに必要なPropsをリクエストする サーバでUIを構築するにあたり、必要となるPropsをリクエストします。 PropsのリクエストはgetServerSideProps()で行います。 API経由でデータを取得している場合はAPIサーバへリクエストすることになります。 Propsを取得する リクエストしたPropsが返され、SSRの準備が整います。 SSRを実行する 取得したP
Hydrationについて HydrationとはHTMLに付随したJavaScriptを利用してイベントリスナを登録することでインタラクティブ(操作可能)なページを生成する過程のことをいいます。Hydrationはクライアントサイド(ブラウザ)で実行されます。 Hydrationの定義と役割については、Next.js『Pre-rendering and Data Fetching#Pre-rendering』に記載されている説明と図も参照してください。 Next.jsの公式ドキュメントでも説明されている通り、HydrationというプロセスはPre-renderingの有無に関わらず実行されます。 Next.js(Pre-rendering)におけるHydrationの過程について Next.js(Pre-rendering)のHydrationではページをインタラクティブにする処理に加
JWTはtokenというキー名でCookieに保存する JWTの署名アルゴリズムはRSA256を利用する JWTのエンコードでは事前に作成したRSA暗号の秘密鍵を利用する JWTにはユーザーIDを保存する JWTの有効期限は14日とする 下準備 ユーザーの作成 認証対象のユーザーを作成します。ActiveModel::SecurePassword::ClassMethodsのドキュメントに従い、has_secure_passwordでパスワード管理されたデータを作成します。 Gemfile gem "bcrypt" ### モデルのマイグレーション $ rails g model user name email password_digest $ rails db:migrate user.rb class User < ActiveRecord::Base has_secure_pass
relative/absoluteを利用する方法 Flexbox化し、『align-items: center』を適用する方法 上下に均等なpaddingを確保する方法 table-cell化し、『vertical-align: middle』を適用する方法 line-heightで高さを確保する方法 以下ではそれぞれの方法について紹介します。 relative/absoluteを利用する方法 親要素で囲み、親要素をposition: relative・コンテンツの要素をposition: absoluteとすることで天地中央揃えを実現する方法です。 absoluteとrelativeを利用した上下左右の中央よせ方法で紹介した通り、relative/absoluteを利用した中央よせには『marginプロパティを利用する方法』と『transformプロパティを利用する方法』の2つがあります
条件によってレンダーするコンポーネントを出し分ける際は条件付きレンダーを利用します。 今回は条件付きレンダーの記述方法について紹介します。 条件付きレンダーの記述方法 条件付きレンダーの記述方法について紹介します。 条件分岐を実装したメソッドを定義し、JSX内でメソッドを呼び出す 条件付きレンダーをコンポーネントのメソッドで定義し、JSX内でメソッドを呼び出す方法です。 JSXからメソッドを呼び出す、つまりJSX内に式を埋め込む場合は中括弧({})で式を囲む必要があります。1 以下のコードはisMorningがtrueなら<GoodMorning />、falseなら<GoodEvening />をレンダーする例です。 import React from "react"; import GoodEvening from "./GoodEvening"; import GoodMorning
2021年2月現在、Reactの公式ドキュメントで紹介されているチュートリアルのサンプルアプリケーション(三目並べ)はJavaScriptで書かれています。 今回、サンプルアプリケーションのTypeScript版を作成したので紹介します。 なお、サンプルアプリケーションの概要を知っている前提で話を進めますので、概要を知らない方は公式ドキュメントとあわせて読んでいただければと思います。 アプリケーションのひな型をローカル環境に準備する create-react-appを利用してアプリケーションのひな型を作成します。 --templateオプションを利用するとcreate-react-appで作成されるひな型のカスタマイズができます。 TypeScriptベースのアプリケーションを作成する場合は--template typescriptを利用します。 なお、テンプレートはnpm上にcra-te
REST APIを開発するにあたり、OpenAPI Specification(OpenAPI 3.0以前でいうところのSwagger Specification)をAPIの仕様書として利用している方は多いのではないでしょうか。 しかし、OpenAPI Specificationを仕様書として利用する場合、きちんとメンテナンスを続けなければ実際のAPIの挙動と仕様書の内容に違いが生まれてきてしまいます。 committeeを利用することで、OpenAPI Specificationと実際のAPIの挙動が一致しているかテストコードで検証できます。 今回はcommitteeの導入手順と、実際にテストコードでcommitteeを利用する方法について紹介します。 committee-railsは0.5.1、committeeは4.2.1を利用します。 検証用のAPIは、APIモードで作成したRai
createAsyncThunkについて createAsyncThunkとは非同期処理の実行状況に応じたActionCreatorを生成する関数です。 createAsyncThunkは2つのパラメータを持ちます。 第1引数はtypePrefixと呼ばれる文字列です。typePrefixはActionTypeの接頭辞として利用されます。 第2引数はpayloadCreatorと呼ばれるasync関数(Promiseを返す非同期処理の関数)です。 createAsyncThunkはasync関数で処理されるPromiseの状態に応じたActionCreatorを返します。 createAsyncThunkに関する戻り値 createAsyncThunkによって作成されるActionCreator、およびActionCreatorがdispatchするActionオブジェクトの値について紹介
複合インデックス(結合インデックス)とは複数のカラムを組み合わせたインデックスのことをいいます。 検索やソート条件で一緒に利用されるカラムに対して複合インデックスを作成することでクエリの高速化が期待できます。 複合インデックスを正しく作成するにはB-treeインデックスの理解が必須です。 今回は複合インデックスを正しく作成するために必要な基礎知識について紹介します。 複合インデックスには順序がある ユーザーテーブルに存在するlast_name, first_name, ageのカラムに対して複合インデックスを作成する場合を考えてみます。 (last_name, first_name, age)の順で複合インデックスを作成した場合、インデックスの構造は以下のようになります。 (age, last_name, first_name)の順の場合は以下のようになります。 複合インデックスの構造は先
なお、serversはredis://<ホスト名>:<ポート番号>/<db番号>/<ネームスペース>という命名規則です。SSL通信でRedisに接続する場合はredisの部分をredissにします。 たとえば以下のようになります。 config/initializers/session_store.rb Rails.application.config.session_store :redis_store, servers: %w(redis://localhost:6379/0/session), # ホスト: localhost(docker環境の場合はredisコンテナ名) # ポート: 6379 # DB: 0番 # ネームスペース: session expire_after: 90.minutes, # 有効期限90分 key: "_#{Rails.application.cla
こんにちは。Enjoy IT Life管理人の仁科(@nishina555)です。 NuxtにはSSR(Server Side Rendering)、SSG(Static Site Generator)1、SPA(Single Page Application)の3種類のモードが用意されています。 また、本番環境でNuxtアプリケーションを実行するにあたりnuxt buildとnuxt generateの2つのコマンドが用意されています。 nuxt buildはアプリケーションをWebpackでビルドし、JSとCSSをミニファイするコマンド2です。ビルドファイルの出力先は.nuxt配下です。 nuxt generateは静的ウェブサイトへデプロイする静的ファイルを生成するコマンド2です。静的ファイルの出力先はdist配下です。 静的ウェブサイトのホスティングサービスではNetlifyやAm
こんにちは。Enjoy IT Life管理人の仁科(@nishina555)です。 Railsアプリケーションを実際にサービスとして稼働させるためにはWebサーバーとの連携は必須です。 今回はPumaを利用してWebサーバー(nginx)とRailsアプリケーションを連携させる手順について紹介します。 Pumaの設定方法や、Railsとnginxの連携方法について知りたい方の参考になればと思います。 検証サーバーはConoHaのVPSを利用して作成をし、OSはCentOS8とします。 今回の検証環境について 各種バージョンは下記の通りです。 $ cat /etc/redhat-release CentOS Linux release 8.1.1911 (Core) $ node -v v12.18.0 $ ruby -v ruby 2.7.1p83 (2020-03-31 revision
バージョンは、WordPressは5.2.2、MySQLは5.7を利用します。 wordpressコンテナとdbコンテナは複数のコンテナを起動設定を一元管理できるDocker Composeを利用して連携させます。 参考: 検証環境(WordPressのDocker環境)の構築手順 検証環境として利用するWordPressのDocker環境の構築方法について紹介します。 実際に手元でデータボリュームのバックアップ・リストアを確認したいという方は参考にしていただければと思います。 環境構築手順とはいっても、実質docker-compose.ymlを用意するだけですので準備は非常に完了です。 まずは作業用ディレクトリを作成と移動をします。 $ mkdir my_wordpress && cd $_ 作業ディレクトリ配下に以下のようなdocker-compose.ymlを作成してください。 do
Dockerは簡単に環境の破棄・作成ができるのがメリットですが、一方でデータベースのように削除されると困る情報もあります。 そこで今回はコンテナが削除されてもコンテナ上で作成されたデータを保持し続ける方法(データの永続化)について紹介をしたいと思います。 以下のような疑問を持たれている方の参考になればと思います。 データの永続化とは?なぜ永続化が必要? データの永続化とは、Dockerコンテナ上で作成されたデータがコンテナ削除後も残り続けている状態のことをいいます。 データベースなど、コンテナを削除したときに一緒に削除されると困る情報に対してデータの永続化を行います。 では、データの永続化がされていないとどういったことが困るのでしょうか? 例としてデータベースの情報が永続化されていないDocker環境を紹介します。 Docker環境にデータベースを作成し、以下のようにレコードを作成したとし
アプリケーションをDocker化するにあたりdocker-composeという言葉を聞いたことがある方も多いと思います。 今回、docker-composeを利用してDockerでRailsアプリの開発環境の構築したので、docker-composeを利用したRailsアプリを作成する手順と、Dockerファイルやdocker-composeの解説もしたいと思います。 なお、Railsアプリで利用するDBはMySQLを想定しています。 作成したDockerファイルの解説 DockerファイルとはDockerコンテナの構成内容が記述されたファイルのことです。 Dockerファイルの内容をもとにDockerイメージの作成が行われ、Dockerコンテナというインスタンスを起動させることで利用できます。 今回作成した、Railsアプリを実行させるためのDockerファイルは以下のようになります。
こんにちは。仁科(@nishina555)です。 Happy Hacking Keyboard(以下、HHKB)は高級キーボードの中でもっとも有名なキーボードの1つです。 特に、IT業界においてはエンジニアであればほんどの人が知っているといっても過言ではないでしょう。 HHKBはコンパクトでスタイリッシュな形が特徴的ですが、形状以外にもキーボードの配列や機能が特殊という特徴もあります。 僕はMacBook Proを愛用していたのですが、先日HHKBに乗り換えをしました。 購入したのはHappy Hacking Keyboard Professional BT US配列というBlue toothで接続するタイプのものです。
こんにちは。仁科(@nishina555)です。 1Password7はログインフォームの入力の手間を省き、パスワードも安全に保管してくれるオススメのアプリです。 ただ、1Password7のアプリ自体は非常に素晴らしいのですが、その購入方法が複雑で分かりにくいんですよね。 まず、1Password7にはサブスクリプション(月額・年額課金)とスタンドアロン(買い切り)の2種類のライセンスが存在しており、それぞれで購入方法が異なります。 サブスクリプションとスタンドアロンの違いについては『1Password7のライセンス、サブスクリプション(月額・年額課金)とスタンドアロン(買い切り)の違いは?』で紹介をしました。
ラベルの補足をします。 P(パーセンタイル)は全体を100としたときに小さい方から数えて何番目になるのかを示した数値で、よく聞くパーセンテージとは違うものです。 定義だけ聞くとわかりにくいのですがこちら記事で説明されている例がわかりやすいです。 例えば、あなたがあるテストを受けたとします。テスト結果が返ってきて、あなたの点数は85パーセンタイルと判定されたら、あなたの成績は上位15%である(あなたの下に85%存在する)ということです。 Pパーセンタイルの位置は、データの数をnとすると、(n+1)P/100で与えられます。 つまり、P1(1パーセンタイル)は上位99%(= 下位1%)の値、P50(50パーセンタイル)は中央値、P99(99パーセンタイル)は上位1%の値を示しています。 STDDEV(Standard Deviation、標準偏差)は、ばらつき度合いを示す指標です。 つまり、標
このページを最初にブックマークしてみませんか?
『Enjoy IT Life』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く