ECのウェブ担当者のメモ

ECサイトを運営管理している、WEB担当プログラマのメモ

スポンサーリンク

AWS CLIを使って ファイル名指定してS3内のファイルを削除する

f:id:jun9632:20210610140430p:plain

実行するコマンドは下記のようになります

aws s3 rm --recursive s3://my.bucket.com/logs/ --exclude '*' --include 'log-*'

s3://my.bucket.com/logs/

my.bucket.com バケットの logs/ ディレクトリを対象にする。

--recursive

指定のディレクトリ内またはプレフィックス内のすべてのファイルやオブジェクトに対してコマンドを実行する。

--exclude '*'

いったん全部除外

--include 'log-*'

log- で始まるファイルを削除対象とする。

補足

削除確認するときは --dryrun をつけてから実行すると安全です。

aws s3 rm --recursive s3://my.bucket.com/logs/ --exclude '*' --include 'log-*' --dryrun

関連記事

marketing-web.hatenablog.com

marketing-web.hatenablog.com

AWS ELBでメンテナンス(503)画面を表示する

f:id:jun9632:20210527103255p:plain

awsのelbだけで、メンテナンス画面を表示させる方法です。

elbのルートの条件は下記のようにしています。

f:id:jun9632:20210527103658p:plain

条件やレスポンスなど 適宜調整してください。

パス

 *

レスポンスコード

503

Content-Type

text/html

レスポンス本文

<!DOCTYPE html>
<html>
<head>
  <title>メンテナンス作業中です。(503)</title>
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  <meta charset="UTF-8" />
  <style>
    .page {
        margin-top: 60px;
    }
    .tit_box.center {
      text-align: center;
    }
    .page .page_inner {
      max-width: 640px;
      text-align: center;
      margin: 0 auto;
    }
  </style>
</head>
<article class="page">

  <div class="tit_box center">
    <img src="https://placehold.jp/60/666666/ffffff/300x300.png?text=503%0A" >
  </div>
  <div class="tit_box center">
    <h1 class="page-title">503 Service Unavailable<br>ただいま、メンテナンス作業中です</h1>
  </div>

  <div class="page_inner">
    <p>
      メンテナンス作業中のため、ただいまサービスをご利用頂くことができません。<br>
      ご迷惑をおかけして大変申し訳ありませんが、終了までしばらくおまちください。<br>
    </p>
  </div>
</article>

<body>
</body>
</html>

上記のようなルートを作っておき、 必要な時に、条件の一番先頭に移動すると、いつでもメンテナンス画面に変更することができます。

f:id:jun9632:20210527103926p:plain

関連記事

marketing-web.hatenablog.com

Local開発用に スタンドアローン版 graphql playground を インストールして使う

f:id:jun9632:20210514104351p:plain

aws Lambda の serverless で graphqlのAPIサーバーを開発しているけど、 コンソールからこんな感じのコマンド叩くのに辛みを感じできたので

curl http://localhost:3000/local/graphql  -X POST -H "Content-Type:application/json" -d '{"query": "query {user {id, name}}"}'

graphql-playground とか graphiql を使いたい!

最初は、Lambda に一緒にのせてホスティングできないかなとも考えましたが、 もろもろ大変そうなので graphql-playground のスタンドアローン版を使うことにしました。

インストール

早速インストールですが、 インストーラー(.dmg)をこちらのページからをダウンロードしてインストールしました。

www.electronjs.org

起動

今回ローカル環境として、serverless offline プラグインで起動しています。

github.com

下記で起動

sls offline start -s local

すると

http://localhost:3000/local/graphql

でアクセスできるように設定しています。

設定

graphql-playground のアプリを起動すると、 Localのフォルダを指定するか、エンドポイントを指定するかをきかれるので 先程起動したローカル環境のエンドポイントを指定して Openします。

f:id:jun9632:20210514094353p:plain

設定はほとんどなくこれだけで使えるようになります。

f:id:jun9632:20210514102646p:plain

AWSにデプロイ後の、APIゲートウェイの エンドポイントに設定を変えるだけでも使えるので フロント側の開発が別の人でも、簡単に共有できると思います

関連記事

marketing-web.hatenablog.com

初めてのGraphQL ―Webサービスを作って学ぶ新世代API

初めてのGraphQL ―Webサービスを作って学ぶ新世代API

homebrewで入れたnodenvのバージョンアップ

f:id:jun9632:20210513141625p:plain

nodenv で

nodenv install -l

したけど、一覧に該当の新バージョンがないので、nodenvをバージョンアップしたいときの話

下記を実行する!

brew upgrade nodenv node-build

これで無事に最新バージョンが一覧で確認できました。

関連記事

marketing-web.hatenablog.com

Node.jsデザインパターン 第2版

Node.jsデザインパターン 第2版

brew update でエラー

f:id:jun9632:20210513140717p:plain

brew updateしたら下記のようなエラーが発生

Error:
  homebrew-core is a shallow clone.
  homebrew-cask is a shallow clone.
To `brew update`, first run:
  git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core fetch --unshallow
  git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-cask fetch --unshallow
This restriction has been made on GitHub's request because updating shallow
clones is an extremely expensive operation due to the tree layout and traffic of
Homebrew/homebrew-core and Homebrew/homebrew-cask. We don't do this for you
automatically to avoid repeatedly performing an expensive unshallow operation in
CI systems (which should instead be fixed to not use shallow clones). Sorry for
the inconvenience!

メッセージにあるとおり下記をそれぞれ実行して解決しました。

  git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core fetch --unshallow
  git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-cask fetch --unshallow

関連記事

marketing-web.hatenablog.com

marketing-web.hatenablog.com

Shopify のテーマを Theme Kit で作るための環境構築

f:id:jun9632:20201225174707p:plain

Shopify のテーマを Theme Kit で作るための環境構築です。 本当に最初の最初

Macに Theme Kit を install

公式 shopify.github.io

brew tap shopify/shopify
brew install themekit

インストールの確認

theme help

Usageが表示されればinstall 成功。

Complete documentation is available at https://shopify.github.io/themekit/

Usage:
  theme [command]

Available Commands:
  configure   Create a configuration file
  deploy      deploy files to shopify
  download    Download one or all of the theme files
  get         Get a theme and config from shopify
  help        Help about any command
  new         New will generate a new blank slate theme in the same directory where it gets called from and create a new theme on Shopify with those files.
  open        Open the preview for your store.
  publish     publish a theme
  remove      Remove theme file(s) from shopify
  update      Update Theme kit to the newest version.
  version     Print the version number of Theme Kit
  watch       Watch directory for changes and update remote theme

Flags:
      --allow-live                 Will allow themekit to make changes to the live theme on the store.
  -c, --config string              path to config.yml (default "/Users/jimai/workspaces/MyProject/shopify/config.yml")
  -d, --dir string                 directory that command will take effect. (default current directory)
  -e, --env stringArray            environment to run the command (default [development])
  -h, --help                       help for theme
      --ignored-file stringArray   A single file to ignore, use the flag multiple times to add multiple.
      --ignores stringArray        A path to a file that contains ignore patterns.
      --no-ignore                  Will disable config ignores so that all files can be changed
      --no-update-notifier         Stop theme kit from notifying about updates.
  -p, --password string            theme password. This will override what is in your config.yml
      --proxy string               proxy for all theme requests. This will override what is in your config.yml
  -s, --store string               your shopify domain. This will override what is in your config.yml
  -t, --themeid string             theme id. This will override what is in your config.yml
      --timeout duration           the timeout to kill any stalled processes. This will override what is in your config.yml
      --vars string                path to an file that defines environment variables
  -v, --verbose                    Enable more verbose output from the running command.

Use "theme [command] --help" for more information about a command.

Access keyを生成する

shopify.github.io

shopify管理画面からAPIAccessキーを生成します。

アプリ管理 > プライベートアプリを管理する をクリック

f:id:jun9632:20201225142944p:plain

諸々同意しならが、アプリを作成

アプリ名と連絡先emailを設定

f:id:jun9632:20201225143211p:plain

テーマを 読み書きできるようにアクセス権を変更

f:id:jun9632:20201225143240p:plain

保存すると、キーやパスワードが生成されます。

f:id:jun9632:20201225143315p:plain

テーマを新規作成

shopify.github.io

mkdir my-theme
cd my-theme
theme new --password=[your-password] --store=[your-store.myshopify.com] --name=[theme name]
[your-password]  => 管理画面で生成されたパスワード
[your-store.myshopify.com]  => 自分のshopify の ドメイン部分 (xxxxx.myshopify.com)
[theme name] => テーマ名 任意の名前

これで、ベースのファイルが生成されるので開発に取りかかれます。

開発中に使うコマンド

ブラウザで開発中の内容を確認する場合

theme open

変更をすぐアップロードしてくれる

theme watch

ファイルを全部アップする場合

theme deploy

関連記事

Railsからvueへpropsへデータの受け渡し方法

f:id:jun9632:20200412132324p:plain

下記の例では、Rails側のテンプレートで items/show.html.slim の id="recommend-category" の dataに code と item-group-codeを設定しています。(ケバブケースが良い様です)

items/show.html.slim

#recommend-category(data-code="#{@item_group.code}" data-item-group-code="#{@item_group.code}")

= javascript_pack_tag 'item'

recommend-category に vueを反映しつつ、propsにdataセットを渡しています。 app/javascript/packs/item.js

import RecommendCategories from './components/category/RecommendCategories'

document.addEventListener('DOMContentLoaded', () => {
  new Vue({
    el: '#recommend-category',
    render: h => h(RecommendCategories, { props: document.getElementById("recommend-category").dataset})
  })
})

vueのコンポーネント側では、propsで受け取ります。

app/javascript/packs/components/category/RecommendCategories.vue

`export default {
  props: ['itemGroupCode', 'code'],
}

関連記事

marketing-web.hatenablog.com

marketing-web.hatenablog.com