サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ブックレビュー
qiita.com/NaokiIshimura
はじめに hotwire-railsの勉強にあたって、スクリーンキャストの内容を写経しながら理解した動作について、備忘録として投稿させていただきます。 投稿してる人の理解度 Hotwireを利用すればRailsアプリでSPAが実現できる。 もくじ スクリーンキャストを写経しながらHotwireを理解する(その1) - 0:00 ~ 0:55 Hotwire の 説明 - 0:56 ~ 2:21 Hotwire を 導入する準備 スクリーンキャストを写経しながらHotwireを理解する(その2) - 2:22 ~ 3:16 ページの一部 を turbo-frame にする - 3:17 ~ 3:35 turbo-frame内のリンク から 別ページへ遷移できるようにする スクリーンキャストを写経しながらHotwireを理解する(その3) - 3:36 ~ 4:38 turbo で ページ全体
問題点 CodeBuildでaws ecr get-loginコマンド実行時にエラーが発生する ビルド結果 buildspec.yml(抜粋) version: 0.2 phases: pre_build: commands: - # 省略 - $(aws ecr get-login --no-include-email --region ${AWS_DEFAULT_REGION}) - # 省略 [Container] 2018/08/23 06:59:56 Running command $(aws ecr get-login --no-include-email --region ${AWS_DEFAULT_REGION}) An error occurred (AccessDeniedException) when calling the GetAuthorizationToken
もくじ WEB/APサーバが一体化された構成 WEB/APサーバが分離された構成(WEB:AP = 1:1) WEB/APサーバが分離された構成(WEB:AP = 1:多) WEB/APサーバが分離された構成(共有ディレクトリ有り) UNIXドメインソケット利用時の注意点 1. WEB/APサーバが一体化された構成 WEB(Nginx)とAP(Rails)を1台のサーバ内に収める構成です。 NginxとRailsの連携にはUNIXドメインソケットを利用します。 【Nginx ポケットリファレンスより抜粋】 UNIXドメインソケットのでの接続は同一サーバ内に制限されますが、TCP接続と比べて接続時のオーバーヘッドが少ないので、細かい大量のアクセスを処理する際に負荷の軽減を図ることができます。 UNIXドメインソケットを利用するために、pumaのコンフィグにsockファイルのパスを指定します。
ざっくりまとめた図 以下は各機能やファイルがどのように連携するのかを自分なりにまとめた図です。 これから ECS Blue / Green Deploy に着手する方の助けになれば幸いです🙇♂️ はじめに 本投稿では私自身が AWS ECS の Blue / Green Deploy を実現できるようになるために学んだことを備忘録として投稿させていただきます。 前提知識 ECSのデプロイはCodePipelineで自動化していた(Blue / Green は利用してない) 背景 エンドユーザが新しいバージョンのアプリを操作可能となる前に本番環境で動作確認できるようにしたかった ECS Blue / Green Deploy であれば容易に実現可能だと思った 学習 ECS Blue / Green Deploy の 学習に参考としたサイト 以下のサイトでは「80ポートでリクエストを受け付
はじめに Rails6でwebpackerが標準になったことにより、Railsアプリの開発環境にyarnのインストールが必要になりました。 webpacker,yarnがインストールされてない環境で発生するエラーと解決方法について備忘録として投稿させていただきます。 開発環境 Rails 6.0.0.rc2 Ubuntu Server 18.04 LTS もくじ webpacker がインストールされてない yarn がインストールされてない node_modules がインストールされてない パッケージのバージョンが不一致(?) ⚠️ webpacker がインストールされてない rails6のアプリを新規作成したときに発生します。 $ rails s => Booting Puma => Rails 6.0.0.rc2 application starting in developme
全体の流れ ドメインを取得する ドメインにALBを割り当てる ←今回の投稿 HTTPS化する もくじ ドメインにALBを割り当て アクセス確認 参考 ドメイン名を登録する方法 - アマゾンウェブサービス 前提条件 ALB(Application Load Balancer)は事前に作成済み ドメインは事前に取得済み 1. ドメインにALBを割り当て Route 53のコンソールでドメインにALBを割り当てます。 補足: Alias TargetテキストボックスをクリックするとALBの一覧が表示される 2. アクセス確認 ブラウザで登録したURLにアクセスする。 Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently rea
Netlifyとは WEBサイトのホスティングサービス https://www.netlify.com/ Netlifyに関する投稿 Netlify / GithubPages / Heroku の速度比較 ドラッグ&ドロップでWEBサイトを公開する Github連携でWEBサイトを公開する カスタムドメインを設定する ←今回の投稿 Forms機能を利用して問い合わせフォームを作成する 目標 サブドメイン無しのURL( https://naokiishimura.cloud )へアクセスしたときに、Netlifyを利用して公開したサイトへアクセスできるようにする。 補足 手順内では私が所持していたドメイン( naokiishimura.cloud )を利用してます。 カスタムドメインの設定 Netlifyの管理コンソールでドメインを設定する。 補足:サブドメイン無しのドメインを指定した場合
もくじ CloudFront 経由で S3 のファイルにアクセスできるようにする 独自ドメインで CloudFront にアクセスできるようにする CloudFront 経由の時だけ S3 のファイルにアクセスできるようにする 準備 S3に画像ファイルをアップロードしておく 画像ファイルに公開する設定をしておく ブラウザから画像ファイルのリンクにアクセスして画像が表示されることを確認しておく 種別 URL アクセス可否
もくじ ALBの作成 Fargateタスクの作成 Fargateクラスターの作成 Fargateサービスの作成 アクセス確認 事前準備 事前にnginxのコンテナイメージをリポジトリに登録しておきます。 Amazon ECS を利用する前にローカルでコンテナを動かす - Qiita 1. ALBの作成 事前にサービスで利用するALB(Application Load Balancer)を作成しておきます 補足:ECSとの違い FargateではALBに割り当てるターゲットグループのターゲットの種類にipが指定されてないと、サービス作成時に指定することができませんでした。 2. Fargateタスクの作成 Fargate用のタスクを作成します。 補足:ECSとの違い Task SizeのCPUとメモリが必須パラメータになってました ポートマッピングでホストポートの指定が不要になってました 3
Netlifyとは WEBサイトのホスティングサービス https://www.netlify.com/ Netlifyに関する投稿 ・Netlify / GithubPages / Heroku の速度比較 ・ドラッグ&ドロップでWEBサイトを公開する ・Github連携でWEBサイトを公開する ・カスタムドメインを設定する ・Forms機能を利用して問い合わせフォームを作成する ←今回の投稿 Forms機能について NetlifyのForms機能を利用すると、サーバサイドの実装やJavaScriptのコードを記述することなく、「問い合わせフォーム」のような投稿機能がWEBサイトに追加できます。 フォームに投稿された内容はNetlifyの管理コンソールやメールなどで確認することができます。 テキストだけでなくファイルも投稿させることができます。 Freeプランでは100投稿/月、10MB
$ npm -g install firebase-tools npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules npm ERR! path /usr/local/lib/node_modules npm ERR! code EACCES npm ERR! errno -13 npm ERR! syscall access npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules' npm ERR! { Error: EACCES: permission denied, access '/usr/local/lib/node_modules' npm ERR! stack: 'Error
はじめに 久しぶりにCentOSへRailsをインストールする機会があったので、rbenv, Rubyインストールの手順をメモしました。 環境 CentOS 7.3.1611 もくじ 1. Git 2. rbenv 3. ruby-build 4. .bash_profile 5. パッケージ 6. ruby 7. エラーと解決方法 8. yumでRubyをインストールする場合の注意点 1. Git
問題 iOS端末でPWA(プログレッシブウェブアプリ)のスプラッシュ画面が真っ白になり、アイコン、アプリ名などが表示されない。 バージョン iOS 11.3 詳細 manifest.jsonでName、background_color、iconを設定した場合、 Androidの場合は上記を組み合わせたスプラッシュ画面が表示される iOSの場合は真っ白な画面が表示される manifest.json { "name": "Weather PWA", "short_name": "Weather", "icons": [{ "src": "images/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "images/icons/icon-144x144.png", "sizes": "144
【備忘録】AWS ECRにdocker pushした際にno basic auth credentialsとなった場合の解決方法AWSECR $ aws ecr get-login --no-include-email --region ap-northeast-1 docker login -u AWS -p xxxxx== https://xxxxx.dkr.ecr.ap-northeast-1.amazonaws.com $ docker login -u AWS -p xxxxx== https://xxxxx.dkr.ecr.ap-northeast-1.amazonaws.com Login Succeeded $ docker push xxxxx.dkr.ecr.ap-northeast-1.amazonaws.com/xxxxx:latest The push refer
はじめに Macに oh-my-zsh をインストールした際の手順をメモしておきます。 zsh は iTerm2 で利用することを前提とした手順になっております。 もくじ 1. zsh インストール 2. oh my zsh インストール 3. デフォルトのログインシェルを設定 4. iTerm2 インストール/シェル設定 5. zsh, iTerm2 テーマ設定 6. PATHの追加読み込み設定 7. .bash_profile読み込み設定 参考サイト Oh My Zsh Become a Command Line Power User with Oh My ZSH and Z 環境 macOS Sierra バージョン 10.12.6 1. zsh インストール macにデフォルトでインストールされてるzshを確認する
はじめに ECSのローリングアップデートの動作を確認しましたので、備忘録として投稿します。 もくじ 旧バージョンのコンテナをデプロイ 新しいリビジョンのタスク定義を作成 サービスを更新して新バージョンのコンテナをデプロイ ローリングアップデートの流れ 参考 ECSでコンテナのrolling update - Carpe Diem Amazon ECS launches new deployment capabilities; CloudWatch metrics; Singapore and Frankfurt regions | AWS Compute Blog コンテナイメージについて ローリングアップデートの動作確認用にECRへv1、v2とタグ付けしたコンテナイメージをプッシュしておきます。 今回の投稿では v1 旧バージョンのコンテナイメージ v2 新バージョンのコンテナイメージ
背景 iOS(11.3時点)のPWAではCookieが起動ごとに初期化され、Session(Cookie)を利用したログイン状態の保持ができません。追加調査でLocalStorageについては初期化されないことがわかったため、LocalStorageを利用したオートログインの実現について実験しました 来週開催されるWWDCやiOS12で解消されるのを切に願ってます😭 過去の調査内容 【調査】WEBアプリをPWAとして起動した場合にブラウザのCookieが引き継がれるか確認する - Qiita 【調査】WEBアプリをPWAとして起動した場合にブラウザのlocalStorageが引き継がれるか確認する - Qiita サンプルアプリ 調査のために作成したサンプルアプリは今後もiOS, Androidバージョンアップ時に利用する可能性がありそうなためHerokuで公開しておきました。(無料プラ
【追記】調査用アプリ 調査で利用したWEBアプリは今後もiOS, Androidバージョンアップ時に利用する可能性がありそうなためHerokuで公開しておきました。(無料プランのためしばらくアクセスがなかった場合はページが表示されるまで少し時間がかかります) https://pwa-localstorage-test-app.herokuapp.com/ 調査内容 WEBアプリをPWA(プログレッシブウェブアプリ)として起動した場合にブラウザのlocalStorageが引き継がれるか確認する。 調査対象 iOS 11.3 Android 8.0 調査の背景 参考:【調査】WEBアプリをPWAとして起動した場合にブラウザのCookieが引き継がれるか確認する - Qiita iOS(11.3)のPWAではブラウザとCookieが共有されない&前回起動時のCookieは引き継がれないため、これ
- ブラウザとPWAでCookieが共有されない - PWAを再起動してもCookieは保持される - PWAをタスクキルしてもCookieは保持される - 端末を再起動するとPWAのCookieは初期化される 【更新履歴】 2019/05/11 : まとめ に iOS12.2 のiPhoneで確認した動きを追記しました。 【追記】調査用アプリ 調査で利用したWEBアプリは今後もiOS, Androidバージョンアップ時に利用する可能性がありそうなためHerokuで公開しておきました。(無料プランのためしばらくアクセスがなかった場合はページが表示されるまで少し時間がかかります) https://pwa-cookie-test-app.herokuapp.com/ 調査内容 WEBアプリをPWA(プログレッシブウェブアプリ)として起動した場合にブラウザのCookieが引き継がれるか確認する。
全体の流れ ローカルでコンテナを動かす ECSでコンテナを動かす ECSでコンテナをクラスタリングする ←今回の投稿 ECSのログをCloudWatchで収集する ドメインを取得する ドメインにALBを割り当てる HTTPS化する もくじ 今回の投稿ではコンテナをクラスタリングします。 Application Load Balancerの作成 セキュリティグループの作成 ECSのリポジトリにコンテナイメージを登録する ECSのタスク定義を作成する ECSのクラスターを作成する ECSのサービスを作成する アクセス確認 デプロイするコンテナについて 以前の投稿で作成したnginxのコンテナイメージをデプロイします。 1. Application Load Balancerの作成 コンテナへのロードバランシングを行うApplication Load Balancer(ALB)を作成します。 補
aws: access_key_id: 123 #=> Rails.application.credentials.aws[:access_key_id] secret_key_base: 8be8e637d755f79c799048bed8be0c... #=> Rails.application.credentials.secret_key_base secrets.yml はどこへ消えた? 🤔 Rails5.2では新規アプリを作成した時にconfig/secrets.ymlが生成されず、代わりにconfig/credentials.yml.encが生成されるようになりました。 credentials.yml.encの使い方について調べた内容を備忘録として投稿させていただきます。 credentials.yml.enc の編集方法 📝 ファイルを直接編集することはできない cred
もくじ 準備:Herokuログイン 準備:Gemfile修正 準備:git commit Herokuアプリ作成 リモートリポジトリの登録 デプロイ アクセス確認 準備:Herokuログイン CLIでHerokuにログインしておく
全体の流れ ローカルでコンテナを動かす ←今回の投稿 ECSでコンテナを動かす ECSでコンテナをクラスタリングする ECSのログをCloudWatchで収集する ドメインを取得する ドメインにALBを割り当てる HTTPS化する もくじ 今回の投稿ではECSで動かすコンテナの動作確認をローカルで実施します。 Dockerfileの作成 イメージを作成 ローカルでコンテナを起動 ブラウザからアクセス確認 コンテナの起動・停止 コンテナ・イメージの削除 1. Dockerfileの作成 nginx公式イメージの解説を参考にしてDockerfileを用意します。 参考: https://hub.docker.com/_/nginx/ 以下のDockerfileを利用するとローカルのstatic-html-directory配下にあるファイルが/usr/share/nginx/htmlに配置され
注意点 本投稿ではWebpackerがインストールされてないRails5以前のアプリを対象にBootstrap4を導入する手順を掲載しております。 Webpackerが標準となったRails6アプリにBootstrap4を導入する際には以下の記事がとても参考になりました🙇♂️ RailsでBootstrapとFont-AwesomeはWebpackerで今時っぽく使おう - Qiita はじめに Bootstrap 4のComponentsの中にちょうど使いたいと思っていた部品があったので、Bootstrap 4をRailsに導入する手順を確認しました。 公式サイト Bootstrap · The most popular HTML, CSS, and JS library in the world. 注意点 投稿時点でのBootstrapのバージョンはv4.0.0-beta.2 4.
はじめに Cloud9のHTML5テンプレートを利用して、WEBサイトをHerokuで公開する手順について解説します。 HerokuへのデプロイにはHeroku Gitを利用します。 参考サイト How to deploy a static website to Heroku 準備 Herokuのアカウントを作成しておく Cloud9でHTMLテンプレートを選択してワークスペースを作成しておく Cloud9のターミナルを表示しておく 補足: 操作できるターミナルがない場合は+ > New Terminalで新しいターミナルタブを用意できます。 ローカルリポジトリの準備 Heroku Gitを利用したデプロイが実行できるようにGitコマンドでローカルリポジトリ を作成して、デプロイするファイル一式をコミットしておきます。 # 初期化 $ git init # ディレクトリ配下のファイルをコミ
$ heroku config === xxxxx-xxxxx-xxxxx Config Vars DATABASE_URL: postgres://<username>:<password>@<host>:<port>/<database> $ heroku config === xxxxx-xxxxx-xxxxx Config Vars # => DATABASE_URLが表示されない場合は、以下のコマンドを実行してアドオンを追加 $ heroku addons:create heroku-postgresql:hobby-dev Creating heroku-postgresql:hobby-dev on ⬢ xxxxx-xxxxx-xxxxx... free Database has been created and is available ! This database is
このページを最初にブックマークしてみませんか?
『@NaokiIshimuraのマイページ - Qiita』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く