Vue.jsのSFC CSSを使って、HTMLタグに複数のCSSクラスセレクタを適用する方法

TL;DR

  • CSSセレクタは<style></style>内に.exampleのように定義する
  • <template></template>側では$style.exampleのように呼び出す
  • 複数のCSSクラスセレクタを適用する場合は、配列として記述する

例文

<template>
// 中略
                <div :class="$style.icons_line">
                    <img :class="[$style.icon, $style.clickable]" src="@/assets/xxxxx1.svg" height="20"
                        @click="open_delete_modal(item.memo_id)">
                    <img :class="[$style.clickable, $style.icon]" src="@/assets/xxxxx2.svg" height="20"
                        @click="open_edit_modal(item.memo_id)">
                </div>
// 中略
</template>
<style module>
.icons_line {
    text-align: right;
}

.icon {
    /* margin-left: 10px; */
    margin-left: 5px;
    margin-right: 5px;
}

.clickable:hover {
    cursor: pointer;
    background:red
}
</style>

参考箇所

SFC CSS 機能

クラスとスタイルのバインディング

参考

AWS認定試験は、予約日時と受験日時で24時間の間をあける必要がある

AWS認定試験は前日申し込み可能と思っていたが、前日申し込みできなかった

予約日時と受験日時で、24時間以上の間隔をあける必要があるとのこと

2023年9月にAWS CLF試験を受けたときは前日申し込みが可能だったように記憶していたが、

これは9月1日 9時に申し込み・9月1日 14時に受験といったように24時間空いていたので問題なかったみたい

GitHub Actionsに入門する

作成途中のVue.jsの個人開発アプリで、S3へ自動デプロイするようなGitHub Actionsに入門してみた

参考記事をもとに見様見真似でやってみたが、案の定トラブったので、つまずきポイントと解決策だけ残しておく。

masterから自動デプロイできるようになったので、今後はCloudFrontの自動キャッシュ更新する仕組みも実装したい。

デプロイ時エラー

Run aws s3 cp --recursive --region us-east-1 build s3://XXXXXX/

The user-provided path build does not exist.
Error: Process completed with exit code 255.

参考サイトでは run: aws s3 cp --recursive --region ap-northeast-1 build s3://bucket-for-deploying-react-projectとしていたが、

Vue.jsでは/dist配下にビルドされるので読み替える必要があった。

run: aws s3 cp --recursive --region us-east-1 dist s3:///XXXXXX/

参考にした記事

(断念)BOXにGitリポジトリを作成し、WSLで開発したソースコードをバージョン管理する

TL;DR

ファイル共有手段はBOXのみ(GitHubなどのプラットフォームなし)、Gitでバージョン管理をしたいという状況で、試行錯誤した内容をまとめる。

また、ソースコードはWSL内に配置する想定。

  • 個人開発であれば何とか運用できそう、チーム開発はファイル同期の問題があり不安が残る
  • WSL(Ubuntu)からBOX内のファイルにアクセスすることはできた
  • BOX上にGitリポジトリの作成はできた(git pullやgit pushも一応できる)

環境

試したこと

WSL(Ubuntu)からBOXへ接続する

wsl起動時にboxが自動マウントされるように設定するを参考にした。

BOXにgitリポジトリを作成する

共有フォルダにリモートリポジトリを作る手順を参考にした。

WSL(Ubuntu)環境からでは、BOX上でgit clone --bareが実行できなかった。(原因不明だが権限の問題?)

(もしかすると、PowerShellなどWindows環境からならBOX上でgit cloneはできるかもしれない)

そのため、次の手順でBOXにリモートリポジトリを配置した。

1.WSL(Ubuntu)内で、任意のディレクトリでgit initする(適当に1回git commitもしておく)

2.WSL(Ubuntu)内の別のディレクトリで、git clone --bareを実行し、.git/を生成する(cloneする対象は手順1で作成したローカルリポジトリ)

3.生成した.git/をBOX上にコピーペーストする

4.手順3でペーストした.git/に対して、各開発メンバがgit cloneする。以降通常の開発手順と同じ

ローカルキャッシュの最新化

boxではローカルキャッシュが常に最新ではないため、gitのpullするとエラーが出たりする。 1人だけでbox上のgitを使っているならば問題ないが、他人と共有するなら頻繁にエラーが出ることになる。

boxにgitリポジトリを作って運用する

今回、運用を断念した直接の原因はこれで、ローカルキャッシュが常に最新とならない。

git pullするとき、gitは各メンバのBOXローカルキャッシュを参照すると思われる。

メンバAがgit pushした内容が、メンバBのローカルキャッシュで保持できていないタイミングがある。

参考記事のbatの実行

boxにgitリポジトリを作って運用するで紹介されているbatは ローカルにキャッシュされているファイルは最新化できるかもしれないが、新たに追加されたファイルは検知・最新化できない可能性がある。(そのため、正しくgit pullできない可能性がある)

見たところ、.git/objects/配下のファイルはよく新規作成されそうな印象だった。

実際にメンバAがgit pushを実行してみて、メンバBが当該batを実行後にgit pullしてみたところAlready up to updateが出力された。

(後述のように、WSLからはファイルの最新化が遅れていることが原因の可能性もある)

Box Driveの標準機能「Refresh Folder」の実行

Box Driveでは「Refresh Folder」という機能でローカルキャッシュを最新化できる。

この機能で最新化したあとにgit pullすれば正しく動作するのではと考えたが、「最新化できた」というポップアップが表示された直後にgit pullしても、Already up to updateが出力されるケースがあった。

(最新化というポップアップが出ても実際にはまだ最新化されていない or Windows側では最新化されていても、WSLでは反映に別途時間がかかっていると思われる)

画像抜粋: Box Drive v2.25 リリースノート (2022年2月)

まとめ

以上のことから、BOXのファイルを最新化する・最新化されていないことを検知する方法を確立できなかった。 そのため、第三者によるファイルの新規作成・更新が入るケース(=チーム開発)でのBOX-Gitリポジトリ運用は難しいと思われる

(Slackで「今pushしたよ」の声の掛け合いなどがあれば、運用でごまかせそう)

個人で運用するぶんには、ファイルは最新状況が完全に反映されるはずなので、問題ないようにも思われる。

【AWS SAA対策】AWSハンズオン資料_リンク集

はじめに

AWS SAAの資格取得にあたって、問題集だけで理解していく&記憶していくこと・実務に紐付けることは難しいことから、簡単なハンズオンは積極的にトライしていくことにした。

これらはDevelopers.IOやQiitaなどに散らばっているため、リンク集としてまとめておく。

リンク集

Lambda + API Gateway

API Gatewayとlambdaを使ってみる

2023年12月に実施。

AWS マネジメントコンソールのUIがやや異なるが、適宜読み替えることで対応できた。

Auto Scaling

[入門] AWSのネットワークとAutoScalingなWebサーバーを作るハンズオンを作りました

ECS

AWS Hands-on for Beginners Amazon Elastic Container Service 入門 コンテナイメージを作って動かしてみよう | AWS Webinar

2024年1月に実施。 AWS ECSを使って、Apacheを起動するという講義内容となっている。

AWS マネジメントコンソールのUIがやや異なるが、適宜読み替えることで対応できた。

Dockerはある程度知っているが、それをAWS基盤でどうするかは知らない人向け?

UbuntuからAWS EC2インスタンスへSSH接続する方法

はじめに

AWS ELBの学習のために、EC2を起動したかった。 かつてはWindowsから操作していたのでTeraTermが使用できたが、Linux(Ubuntu22.04)から操作を行うようになったので、起動に戸惑ってしまった。 そのときに発生したエラー内容と解決策を備忘録として残す。

環境

  • Ubuntu22.04

まとめ

  • TeraTermはWindows用アプリケーションなので、Ubuntuからは使えない

    • sshコマンドを使う

  • AWSマネジメントコンソールからダウンロードしたpemファイルはPermissionが664なので、sshコマンドでエラーが発生してしまう

    • 600に変更する

SSH接続に使用したコマンド

$ ssh -l ec2-user -i ./example_name.pem xx.xxx.xxx.xxx

オプション

  • -l ユーザ名
  • -i 鍵ファイルの指定

エラーメッセージ

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@         WARNING: UNPROTECTED PRIVATE KEY FILE!          @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Permissions 0664 for './example_name.pem' are too open.
It is required that your private key files are NOT accessible by others.
This private key will be ignored.
Load key "./example_name.pem": bad permissions
ec2-user@xx.xxx.xxx.xxx: Permission denied (publickey,gssapi-keyex,gssapi-with-mic).

エラーを解決するコマンド

$ chmod 600 ./example_name.pem

参考

WebブラウザからAWS LambdaへPOSTリクエストを送信するとき、CORSエラーになる問題を解決した

解決方法

Lambdaのレスポンスヘッダに、"Access-Control-Allow-Methods": "POST"を含める

問題となったソースコード

画面の「登録する」ボタンを押すと、insertData関数が実行される。

■Webサーバ(Vue3系)

(検証のために、POSTメソッドだがリクエストパラメータを含めている)

const insertData = async () => {
    const isFormCorrect = await v$.value.$validate()

    if (!isFormCorrect) {
        alert("不適切な値が入力されています")
        return
    }

    let result;
    try {
        result = await axios.post(url2, {
            params: {
                subject_name: insert_form.subject_name,
                used_time: insert_form.used_time,
                study_date: insert_form.study_date
            }
        });
        error_flag.status_code = ""
    } catch (error) {
        if (error.response.status === 422) {
            error_flag.status_code = error.response.status
            console.log("422 error")
            alert("不適切な値が入力されています")
        }
    }
};

■Lambda(Python)

# ここまで略
    response = {
        'statusCode': 201,
        'body': json.dumps({'message': 'Success'}),
        'headers': {
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*'
            # "Access-Control-Allow-Methods": "POST"
        }
    }
    
    return response