Windows 10のプロジェクトにTypeScriptの開発環境を構築してみます。
WindowsにはNode.jsがインストール済みであることを前提とします。
WindowsでNode.js、gulp.jsをインストールして効率よい開発環境を目指す(準備編)
インストール
コマンドプロンプトを開き、npmコマンドでTypeScriptをインストールします。
> npm install -g typescript
インストール完了後、以下のコマンドでバージョンが表示されれば、インストール成功です。
> tsc -v Version 4.6.4
tsファイルをコンパイル
任意のTypeScriptファイル「script.ts」を用意します。今回はtsファイルの中身については割愛します。
以下のコマンドを実行すると、tsファイルがコンパイルされ、ファイル「script.js」が出力されます。
> tsc script.ts
Docker ComposeでWordPress開発環境を構築します。
今回、以下の環境に構築しました。
- Windows 10 Home
- Docker Engine v20.10.14
開発環境の構成はWordPress、DBはMariaDB、DB参照用にphpMyAdminです。
WordPressのプラグイン、アップロード画像やテンプレートを含むフォルダ「wp-content」はgitで管理しています。
WordPressは本番環境に合わせて、ドキュメントルートからサブフォルダ「wp」に展開します。
docker-compose.ymlを用意する
WordPress開発環境構築用に以下の「docker-compose.yml」を用意します。ファイル「docker-compose.yml」はルートに配置します。
version: '3.8' services: wordpress: image: wordpress:5.9.3 ports: - 8000:80 depends_on: - db working_dir: /var/www/html/wp volumes: - ./public_html/wp/wp-content:/var/www/html/wp/wp-content - ./public_html/.htaccess:/var/www/html/.htaccess - ./public_html/index.php:/var/www/html/index.php environment: WORDPRESS_DB_HOST: db:3306 WORDPRESS_DB_NAME: ${MYSQL_DATABASE} WORDPRESS_DB_USER: ${MYSQL_USER} WORDPRESS_DB_PASSWORD: ${MYSQL_PASSWORD} phpmyadmin: image: phpmyadmin/phpmyadmin:latest depends_on: - db ports: - 8888:80 db: image: mariadb:10.5 volumes: - db-volume:/var/lib/mysql environment: MYSQL_DATABASE: ${MYSQL_DATABASE} MYSQL_USER: ${MYSQL_USER} MYSQL_PASSWORD: ${MYSQL_PASSWORD} MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD} TZ: Asia/Tokyo volumes: db-volume:
DockerでphpMyAdminの環境を構築し、DBに10M程度のデータをインポートしようとしたのですが、以下のエラーが発生しました。
Warning: POST Content-Length of xxxxxxx bytes exceeds the limit of xxxxxxx bytes in Unknown on line 0
アップロードしようとしたファイル容量が、PHP設定の上限を超えてるようです。
この場合、PHPの以下の設定項目を調整すればよいのですが、、
- memory_limit
- post_max_size
- upload_max_filesize
過去記事を参考にphp.iniを設置してみますが、なかなかコンテナに設定が反映されません。
phpMyAdminなどPHPシステムで扱えるファイルの最大サイズを変更する
Windows 10 HomeにDocker Desktopをインストールします。
過去の記事にも書きましたが、WindowsにDockerをインストールするには、以下のシステム要件を満たす必要があります。
Windows Subsystem for Linux 2(WSL 2)をインストールしてみる
- Windows 10のバージョンが2004以上
- WSL2(Windows Subsystem for Linux 2)がインストール済み
- CPUが仮想化に対応していること
ちなみに、今回検証した環境は、Windows 10 Home バージョン21H1です。
Docker Desktopをインストール
以下のページの「Docker Desktop for Windows」をクリックして、インストーラー「Docker Desktop Installer.exe」をダウンロードします。
Install Docker Desktop on Windows | Docker Documentation
ダウンロードしたファイルをクリックして、インストールを実行します。
インストールは簡単で、細かいオプション選択などはありません。
ダウンロードとインストールには少々時間がかかります。私の場合、5分ほどかかりました。また、インストールにはOSの再起動が必要です。
最近の世界情勢の影響なのかスパムが多くなった気がするので、reCAPTCHAを使ってフォームのスパム対策を実装してみます。
reCAPTCHAとはGoogleが提供するスパム対策サービスです。
reCAPTCHA | Google Developers
お問い合わせフォームや、会員登録フォームなどに設置される「私はロボットではありません」チェックボックスや、9枚ほど画像が表示されて「この中から車の画像を全て選択してください」というやつですね。
これらはreCAPTCHA v2で、ユーザの操作や判断の手間が1つ増えることになります。人によっては、この手間が不快に感じる方もいらっしゃるはずです。コンバージョン率低下の懸念がありますね。
それに対して、reCAPTCHA v3はプログラム側(AI)でスパムかどうかを判断するので、ユーザへの影響はほとんどありません。
サイト登録
Goolgeアカウントでサインインした状態で、以下のページにアクセスします。
reCAPTCHA
メニュー「v3 Admin Console」をクリックして、サイトを登録します。
- ラベルには任意で分かりやすいラベル名をセットします
- reCAPTCHAタイプは「reCAPTCHA v3」を選択します
- ドメインにはAPIを使用するドメインをセットします。ローカルで開発、テストなどする場合は「localhost」も有効です。
利用条件に同意して送信します。送信時に発行される「サイトキー」と「シークレットキー」を控えておきます。
Windows 10 HomeにWindows Subsystem for Linux 2(WSL 2)をインストールしてみます。
ここ数年、Dockerに興味があるのですが、Windows 10 Homeにインストールできない状況にやきもきしていました。
手元にはWindows 10 Homeしかなかったので、DockerのためにProfessinalにアップグレードするか、Macを導入するかなど、悩んでいました。
しかし、ここ最近、WindowsのアップデートとWSL 2の技術により、HomeでもDockerが導入できるようになったという情報を見かけるようになったので、チャレンジしたいと思います。
条件と準備
まず、OSの条件として、Windows 10 64bit版で、バージョンが1903以上、ビルド18362以上である必要があります。
私の場合、バージョンが21H1、ビルドが19043と条件は満たしています。
次に、CPUが仮想化に対応していて、かつ、有効にになってる必要があります。
タスクマネージャーを開き、タグ「パフォーマンス」⇒「CPU」の「仮想化」が「有効」になっていればOKです。以下、私の環境です。
さらに、Windows 10 HomeにWSLをインストール済みを前提とします。過去記事はこちら
Windows Subsystem for Linux(WSL)をインストールしてみる
WSL 2のインストール
以下のページの「WSL2 Linux kernel update package for x64 machines」をクリックして、ファイル「wsl_update_x64.msi」をダウンロードします。
Manual installation steps for older versions of WSL | Microsoft Docs
ダウンロードしたファイルを実行して、WSL 2をインストールします。
Windows版のVSC(Visual Studio Code)でGitHubにSSH接続する方法です。
環境はWindows 10、Gitがインストール済みの状態です。
任意のリモートリポジトリをローカルにクローン済みで、それをVSCで開いてる状態から解説します。
VSCでソースを編集して、コミットした後、リモートと同期しようとすると、以下のエラーメッセージが表示されます。
Git: git@github.com: Permision denied (publickey).
さらに、Git Bashを起動して、以下のコマンドで接続テストをすると、同じエラーメッセージが表示されます。
$ ssh -T git@github.com git@github.com: Permission denied (publickey).
SSH接続の準備
Windows版のVSCでは、Windows標準のOpenSSHを使用して接続しているようです。
そこでまずは、PowerShellを起動して、以下のコマンドでSSH鍵を生成します。
> ssh-keygen Generating public/private rsa key pair. Enter file in which to save the key (C:\Users\username/.ssh/id_rsa): Enter passphrase (empty for no passphrase): Enter same passphrase again: Your identification has been saved in C:\Users\username/.ssh/id_rsa. Your public key has been saved in C:\Users\username/.ssh/id_rsa.pub. The key fingerprint is: ...
WordPressの関数「wp_head」はデフォルトでさまざまなコードを出力します。
オリジナルでテンプレートを開発する場合に、このコードが邪魔になることがほとんどです。しかし、wp_head自信を削除してしまうと、プラグインなどが正常に動作しなくなる危険性があります。
なぜなら、wp_headやwp_footerがあることを前提に開発されているプラグインが多くあり、動作に必要なコードを出力しているからです。
そこで、今回はfunctions.phpにアクションフックを記述して、不要なコードの出力を省く方法を調査します。
実際に表示されるコードと削除方法
以下、各セクションにおいて、まずwp_headを読み込むとデフォルトで出力されるHTMLソースを提示します。
次に、そのソースを表示させないため、functions.phpに書き込むアクションフックを示します。
※順不同です。また、新しいバージョンでは表示されなくなっているものもあります。
NVM(Node.js version manager) for Windowsで複数バージョンのNode.jsを使用します。
GitHub – coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically written in Go.
開発環境において、Node.jsを使用する場面が増えてきました。
Node.jsはバージョンアップのサイクルが早い上、バージョンによる環境依存が強いです。
そのため、プロジェクトが増えると、複数バージョンのNode.jsが必要になってきます。
めんどくさいですね。
NVMを使用すれば、複数バージョンのNode.jsをインストール、切替など、簡単に管理できます。
今回はWindows 10 Homeにインストールしてみます。
上記の公式サイトより、 nvm-setup.zipをダウンロードします。zipファイルを解凍してnvm-setup.exeを実行し、インストールします。
インストール中、既にインストール済みのNode.jsがある場合は、NVMで管理するかどうか選択できます。