- 投稿日:2021-01-10T23:14:15+09:00
【メモ】【自分用】Gitコマンド
よく使うGitコマンドのメモ書き
git clone
リモートリポジトリからローカルにcloneする
git clone "https://github.com/XXXX/XXXX"git status
・赤文字:ローカルの作業ファイルと、ステージングエリアの変更有
・緑文字:ステージングエリアとローカルリポジトリの変更有git clone "https://github.com/XXXX/XXXX"git add
変更を加えた作業フォルダを全てステージングエリアに追加
git add .変更を加えた作業フォルダを指定してステージングエリアに追加
git add "作業ファイル名"git commit
ステージングエリアからローカルリポジトリにコミット
git commit -v
コミット時補足'i' : 入力モード切替 'esc' : コマンドモード切替 ':wq' : 保存して終了 ':q!' : 保存せず終了git push
ローカルリポジトリからリモートリポジトリへの反映
git push origin 'ブランチ名'
- 投稿日:2021-01-10T22:41:43+09:00
VSCodeとGitの連携、Githubへのpushまで(初心者向け)
はじめに
こんにちは。
本記事ではVSCode(Visual Studio Code)とGitの連携、Githubへpushまでの手順をまとめました。
できる限り、初心者にもわかりやすいよう説明したつもりです。
私自身、勉強中の身ですので、もし、間違い等がございましたら、ご指摘いただけましたら幸いです。目次
・Git、Githubとは
・インストール(VSCode、Git、GitHub(アカウント作成))
・Gitの初期設定
・ローカルリポジトリの作成
・GitHubにリモートリポジトリの作成
・ローカルリポジトリへのステージ、コミットまで
・VSCodeとGitHubの連携,プッシュまでGit、Githubとは
はじめに表記の2つの用語についてざっくり簡単に説明します。
詳しい説明等は下記を参照ください。Gitとは
Gitは、ファイルの変更管理を追跡することができるバージョン管理ツールです。
ゲームでいう、セーブのようなものですね。
変更した時間、変更した人、変更したファイルの箇所、メッセージの4つの情報を記録します。
(正確には、リビジョン番号等、上記以外にもあります。)
ローカルリポジトリというセーブ情報を記録するための箱に対して変更情報を保存していく(コミットするという)イメージを持っていただけると良いかと思います。Githubとは
Githubは、Gitを使ってバージョン管理しているデータをオンライン上で共有管理するためのWeb上のサービスです。
リモートリポジトリを作成し、ローカルリポジトリの情報を反映することで共有管理することができます。(補足)VSCodeとは
VSCode(Visual Studio Code)は、エディタと呼ばれるソフトウェアの一つです。
エディタとは、機能に優れたメモ帳のようなもので、プログラミングのコードを記載するために使用します。
VSCodeはエディタの中でも、多くのエンジニアに愛用されているうちの一つになります。(補足)Gitで使用する基本的な単語ついて
下記にGit,Githubを使用する時に必要となる基礎的な単語について簡単に説明します。
(初心者が理解しやすいよう、概念、イメージで説明していますので、詳しくは検索してください。)
以降の説明では、これらは理解いただいている前提で記載しております。
何を行っているか分からなくならないよう必要に応じて調べて、理解してから進んでいただければと思います。①リポジトリ:ファイルの変更、更新履歴を管理する場所。リポジトリの種類は下記、2種類あります。
・ローカルリポジトリ:自分のパソコン内での管理
・リモートリポジトリ:インターネット上での管理(他の人と共有できる)②ステージ、コミット、プッシュについて
・ステージ:コミットに含めたいファイルを選択する。
・コミット:ローカルリポジトリに保存する。
・プッシュ:リモートリポジトリに保存する。
上記で説明した通り、Gitではコミット時に「メッセージ」を残すことができます。このメッセージは、変更した内容を端的に記載することが多いです。
ステージで、コミットに含めるファイルを選択することで、変更内容に合う適切なメッセージを残すことができます。インストール(VSCode、Git、Github(アカウント作成))
VSCodeのインストール
インストールが済んでいない方は下記よりインストールしてください。
(mac,windows用とありますので、ご自身の環境に合うものを選択ください。)
VS codeのインストールはこちらGitのインストール
Gitを下記からダウンロードしてください。
Gitのインストールはこちら
ダウンロードが済んでいるかどうか、下記手順により確認しましょう。
①VSCodeを起動してください。
②ターミナルを開いてください。ターミナル→「新しいターミナルを開く」でOKです。
③ターミナルに下記を入力し、enterを押してください。
下記画像のように、バージョン情報が表示されれば、Gitを利用できる状態にあります。
git --version
Githubのアカウント作成
Githbのアカウント作成が済んでいない方は下記リンクより、アカウントを作成してください。
Githubのアカウント作成はこちら
登録方法が分からない、不安要素があるという方は「github アカウント作成」等で検索してみてください。
ざくざく出てくると思います。Gitの初期設定
①VSCodeでcodeコマンドを使用できるようにしていない方は、下記を参考にcodeコマンドが使用できる状態
にしましょう。codeコマンドが使えるかたは、飛ばしてください。
https://qiita.com/RyoInaoka/items/a37009157e1b715847d0
②再度、ターミナルを開き、下記コードを1行ずつ入力し、enterしてください。
設定するユーザー名、設定するメールアドレスにはご自身のもの入力ください。
3行目は、gitのデフォルトエディタをVS Codeに設定する処理です。git config --global user.name 'ユーザー名' git config --global user.email 'メールアドレス' git config --global core.editor 'code --wait'ローカルリポジトリの作成
①Gitで管理したいフォルダを作成してください。(今回は例として、デスクトップに空のtestフォルダを作成しました。)
②VS Codeで①のフォルダを開いてください。
③下記、画面のように、ソース管理のタブにある、「リポジトリを初期化する」をクリックします。
④下記のような画面になれば、ローカルリポジトリが作成されています。
また、VSCodeの画面左下あたりにmasterの記載があればOKです。
master、originについては、下記が分かりやすかったです。
https://qiita.com/seri1234/items/e651b3e108a695a92809
GitHubにリモートリポジトリの作成
①githubにログインし、下記の「new」より、リモートリポジトリの作成をします。
②リモートリポジトリ名を設定します。今回は「test」としました。「Create repository」をクリックすると、リポジトリが作成されます。
③リポジトリ作成後、下記の赤枠部のURLは、リモートリポジトリと接続時に使用するので、控えておいてください。
ローカルリポジトリへのステージ、コミットまで
①先ほどローカルリポジトリを作成したフォルダ(上記例ではtestフォルダ)を編集してみましょう。
今回は下記のように、index.html、style.cssファイルを作成しました。
②ソース管理タブを表示すると、下記のように変更があったファイル名が記されています。ここで、「+」をクリックすることでステージすることができます。
③下記、✔️をクリックすることでコミットできます。コミットの際、メッセージを残すことができます。
後で見た時に、どのような変更を加えたかわかるメッセージにしておきましょう。
VS CodeとGitHubの連携,プッシュまで
①VS Codeでターミナルを開いてください。
②下記、コードを入力して、リモートリポジトリと接続します。
「URL」には、先ほど控えておいたリモートリポジトリ作成時のURLをコピペしてください。
git remote add origin URL
③コミットされたファイルについて、
下記より、プッシュするとローカルリポジトリの変更がリモートリポジトリに反映されます。
④githubを再読み込みして、反映されていることを確認しましょう。
終わりに
今回は、「VS CodeとGitの連携からGithubへのpushまで」について記載しました。
至らない点が、多いかもしれませんが、少しでも多くの方の参考になれば幸いです。
- 投稿日:2021-01-10T21:18:37+09:00
WordPressの開発環境をDocker(Local)とAWS(Production)で構築手順
表題の通り、WordPressの開発環境をDockerとAWSで構築したのでその手順についてまとめます。
まとめる内容は以下になります。
- WordPressのLocal環境をDockerで構築
- Webpackでscssとjsをcompileしてthemesディレクトリにoutput
- scssとjsはassetsディレクトリで作業する
- 開発ファイルはGitで管理する
- WordPressのProduction環境をAWSで構築
- Public Subnet、Private SubnetでそれぞれEC2 InstanceにWordPressとMySQLをinstall
- EC2 InstanceにGitを配置して開発ファイルをPullするとLocal作業が反映される
Local環境
- WordPress の Local 環境を Docker で構築
- Webpack で js と scss ファイルを compile して themes に output
Docker image の version
image: mysql:8.0.22 image: wordpress:latestdocker-compose.yamlversion: '3' services: db: image: mysql:8.0.22 volumes: - db_data:/var/lib/mysql restart: always environment: MYSQL_ROOT_PASSWORD: password MYSQL_DATABASE: wordpress MYSQL_USER: admin MYSQL_PASSWORD: password networks: - wpsite phpmyadmin: depends_on: - db image: phpmyadmin/phpmyadmin restart: always ports: - '8080:80' environment: PMA_HOST: db MYSQL_ROOT_PASSWORD: password networks: - wpsite wordpress: depends_on: - db image: wordpress:latest ports: - '8000:80' restart: always volumes: ['./../src:/var/www/html'] environment: WORDPRESS_DB_HOST: db:3306 WORDPRESS_DB_USER: admin WORDPRESS_DB_PASSWORD: password networks: - wpsite networks: wpsite: volumes: db_data:開発作業
- scss と js の作業は
assets
ディレクトリ内で行う(assets/css/
、assets/js/
)assets
ディレクトリ内で Webpack 起動- scss と js を変更すると自動で compile されて themes に output
- js は
runtime.js
とvendors.js
とindex.js
で分割される- jQueryをinstall
webpack.config.jsconst webpack = require('webpack'); const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const themeName = 'original'; module.exports = { mode: 'production', entry: { index: ['./js/index.js', './css/style.scss'], }, output: { filename: 'js/[name].js', path: path.resolve(__dirname, `../src/wp-content/themes/${themeName}`), publicPath: '/', }, optimization: { runtimeChunk: 'single', splitChunks: { cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name: 'vendors', chunks: 'all', }, }, }, }, module: { rules: [ { test: /\.js?$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], }, }, }, { test: /\.scss$/, use: [ { loader: MiniCssExtractPlugin.loader, }, 'css-loader', 'sass-loader', ], }, ], }, plugins: [ new MiniCssExtractPlugin({ filename: 'css/style.css', }), new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', }), ], };webpack 起動コマンド
$ cd assets $ npm startLocal 環境
/docker
ディレクトリに移動して docker(docker-compose up -d
) 起動http://localhost:8000/
が wordpress の local URLhttp://localhost:8080/
が phpmyadmin の local URLtree
assets/js
のファイルをsrc/wp-content/themes/original/js
に webpack で compile├── assets │ ├── css │ │ └── style.scss │ ├── js │ │ └── index.js │ ├── node_modules │ ├── package-lock.json │ ├── package.json │ └── webpack.config.js ├── docker │ └── docker-compose.yaml └── src ├── index.php ├── wp-admin ├── wp-config-sample.php ├── wp-content ├── index.php ├── languages ├── plugins ├── themes ├── index.php ├── original └── css └── style.css └── js └── index.js └── runtime.js └── vendors.jsgitignore
src/.htaccess src/wp-config.php src/wp-content/uploads/ src/wp-content/upgrade/Docker コマンド
コンテナ表示
$ docker psimage 一覧
$ docker imagesコンテナ起動
-d
を実行すると、コンテナはバックグラウンドで起動し、そのまま実行し続けます。$ docker-compose up -dコンテナ停止
$ docker-compose down本番環境
- AWS で構築
- Public Subnet
- Apatch を install して Web サーバーとする
- Internet Gatewayで外部からの通信を許可
- Private Subnet
- NAT Gatewayを介して外部からの通信を可能するが、サブネットからは通信を不可
- MySQL を install して DB サーバーとする
構成図
SSH でログイン
$ ssh -i {秘密鍵}.pem ec2-user@{IPv4パブリックIP}Web サーバーを踏み台として DB サーバーに SSH ログインして MySQL をinstall
- DB サーバーはインバウンドでInternetと接続してない
- インバウンドで SSH での接続を許可しているので Web サーバーを踏み台に SSH ログインする
- SSH ログインするには pem key を Web サーバーに配置する
- NAT GatewayでPublic Subnetを通してInternetに接続できるようにする
- DB サーバーにログインして MySQL をinstallする
pem key を scp コマンドで Web サーバーにコピーして配置
$ scp -i {秘密鍵}.pem {秘密鍵}.pem ec2-user@{IPv4パブリックIP}:~/DB サーバーに SSH ログイン
$ ssh -i {秘密鍵}.pem ec2-user@{プライベート IPv4 アドレス}参考サイト
MySQL コマンド
MySQL 起動
$ sudo service mysqld startMySQL が起動しているか確認
$ systemctl status mysqld.serviceMySQL にログイン
$ mysql -u root -p初期設定パスワードを変更
mysql> set password for 'root'@'localhost' = '********';データベース
wordpress
を作成CREATE DATABASE wordpress DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;ユーザー ID と PW を設定
mysql> create user '{ユーザーID}'@'%' identified by '{password}';ユーザーに権限を付与
※権限を付与しないと Wordpress のデータベース接続ができないmysql> grant create on *.* to {ユーザーID};ユーザーが作成されたか確認
mysql> select user, host from mysql.user;参考サイト
WordPress をインストール
- Apache が install されている EC2 インスタンスに SSH ログイン
- amazon-linux-extras リポジトリから php を Web サーバーに install
- php7.4 に対応したライブラリの install
- WordPress を install
- WordPress 本体を Apache から見える場所に配置(/var/www/html/)
- ファイルの所有者を apache に変更
- パブリック IPv4 アドレスで WordPress 管理画面が表示される
amazon-linux-extras リポジトリ
のソフトウェア一覧を表示$ amazon-linux-extrasphp7.4 を install
$ sudo amazon-linux-extras install -y php7.4php7.4 に対応したライブラリの install
$ sudo yum install -y php php-mbstringWordPress を install
$ wget https://wordpress.org/latest.tar.gzinstall したフォルダをを解凍
$ tar -xzf latest.tar.gzWordPress 本体を Apache から見える場所に配置(/var/www/html/)
$ cd wordpress/ $ sudo cp -r * /var/www/html/ファイルの所有者を apache に変更
$ sudo chown apache:apache /var/www/html/ -R参考サイト
WordPress とデータベース接続のエラーでハマった点
WordPress を install して管理画面でデータベース接続ができずにハマりました。その対応策としては mysql のユーザー ID に権限を付与してなかったからです。
データベースを使用する権限を付与 part1
エラー文「ユーザー xxx にはデータベース wordpress を使用できる権限がありますか ?」
ユーザーに権限を付与
※権限を付与しないと Wordpress のデータベース接続ができないmysql> grant create on *.* to {ユーザーID};データベースを使用する権限を付与 part2
エラー文WordPress データベースエラー: [SELECT command denied to user '{ユーザーID}'@'{host}' for table 'wp_options']
作成したデータベースを書き込めるようにユーザーに権限を付与
mysql> grant all on wordpress.\* to '{ユーザーID}'@'{host}';Web サーバーから DB サーバーに通信疎通できない場合
エラー文Authentication plugin 'caching_sha2_password' cannot be loaded: /usr/lib64/mysql/plugin/caching_sha2_password.so: cannot open shared object file: No such file or directory
plugin を「caching_sha2_password 」から「mysql_native_password」に変更する
mysql> ALTER USER '{ユーザーID}'@'{host}' IDENTIFIED WITH mysql_native_password BY '{password}';参考サイト
EC2 に git をインストール
EC2 Instanceに SSH ログイン
$ sudo yum -y update $ sudo yum install gitGitHub のアカウント接続する(下記参考サイトを参照)
Apatch の DocumentRoot を変更する
- デフォルトでは
/var/www/html
のファイルがページに表示されるので、それを git で pull したファイルを読むように変更する(下記参考サイトを参照)
/var/www/html
のファイルを/var/tmp/{リポジトリ名/src}
にコピーする$ cp -pR /var/www/html/* /var/lib/{リポジトリ名/src}/設定ファイル
/etc/httpd/conf/httpd.conf
の書き換えDocumentRoot "/var/tmp/{リポジトリ名/src}" <Directory "/var/tmp/{リポジトリ名/src}">Apatch を再起動
$ sudo systemctl restart httpd作成したフォルダ・ファイルの所有者を apache に変更
$ sudo chown apache:apache /var/tmp/{リポジトリ名/src}権限を付与
$ sudo chmod 600 /var/tmp/{リポジトリ名/src}参考サイト
- GitHub ユーザアカウントと GitHub リポジトリ作成 + AWS EC2 から GitHub リポジトリへ push する手順例
- 【Apache】DocumentRoot を変更しよう
- AWS(EC2)で Redmine と Git、Jenkins を使った WordPress 開発環境の構築と公開を行う
以上となります。
これでPublic SubnetのEC2 Instanceの/var/tmp/{リポジトリ名/
でgit pull
すると開発コードが反映されるかと思います。
- 投稿日:2021-01-10T21:18:37+09:00
WordPressの開発環境をDocker(Local)とAWS(Production)で構築
表題の通り、WordPressの開発環境をDockerとAWSで構築したのでその手順についてまとめます。
まとめる内容は以下になります。
- WordPressのLocal環境をDockerで構築
- Webpackでscssとjsをcompileしてthemesディレクトリにoutput
- scssとjsはassetsディレクトリで作業する
- 開発ファイルはGitで管理する
- WordPressのProduction環境をAWSで構築
- Public Subnet、Private SubnetでそれぞれEC2 InstanceにWordPressとMySQLをinstall
- EC2 InstanceにGitを配置して開発ファイルをPullするとLocal作業が反映される
Local環境
- WordPress の Local 環境を Docker で構築
- Webpack で js と scss ファイルを compile して themes に output
Docker image の version
image: mysql:8.0.22 image: wordpress:latestdocker-compose.yamlversion: '3' services: db: image: mysql:8.0.22 volumes: - db_data:/var/lib/mysql restart: always environment: MYSQL_ROOT_PASSWORD: password MYSQL_DATABASE: wordpress MYSQL_USER: admin MYSQL_PASSWORD: password networks: - wpsite phpmyadmin: depends_on: - db image: phpmyadmin/phpmyadmin restart: always ports: - '8080:80' environment: PMA_HOST: db MYSQL_ROOT_PASSWORD: password networks: - wpsite wordpress: depends_on: - db image: wordpress:latest ports: - '8000:80' restart: always volumes: ['./../src:/var/www/html'] environment: WORDPRESS_DB_HOST: db:3306 WORDPRESS_DB_USER: admin WORDPRESS_DB_PASSWORD: password networks: - wpsite networks: wpsite: volumes: db_data:開発作業
- scss と js の作業は
assets
ディレクトリ内で行う(assets/css/
、assets/js/
)assets
ディレクトリ内で Webpack 起動- scss と js を変更すると自動で compile されて themes に output
- js は
runtime.js
とvendors.js
とindex.js
で分割される- jQueryをinstall
webpack.config.jsconst webpack = require('webpack'); const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const themeName = 'original'; module.exports = { mode: 'production', entry: { index: ['./js/index.js', './css/style.scss'], }, output: { filename: 'js/[name].js', path: path.resolve(__dirname, `../src/wp-content/themes/${themeName}`), publicPath: '/', }, optimization: { runtimeChunk: 'single', splitChunks: { cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name: 'vendors', chunks: 'all', }, }, }, }, module: { rules: [ { test: /\.js?$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], }, }, }, { test: /\.scss$/, use: [ { loader: MiniCssExtractPlugin.loader, }, 'css-loader', 'sass-loader', ], }, ], }, plugins: [ new MiniCssExtractPlugin({ filename: 'css/style.css', }), new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', }), ], };webpack 起動コマンド
$ cd assets $ npm startLocal 環境
/docker
ディレクトリに移動して docker(docker-compose up -d
) 起動http://localhost:8000/
が wordpress の local URLhttp://localhost:8080/
が phpmyadmin の local URLtree
assets/js
のファイルをsrc/wp-content/themes/original/js
に webpack で compile├── assets │ ├── css │ │ └── style.scss │ ├── js │ │ └── index.js │ ├── node_modules │ ├── package-lock.json │ ├── package.json │ └── webpack.config.js ├── docker │ └── docker-compose.yaml └── src ├── index.php ├── wp-admin ├── wp-config-sample.php ├── wp-content ├── index.php ├── languages ├── plugins ├── themes ├── index.php ├── original └── css └── style.css └── js └── index.js └── runtime.js └── vendors.jsgitignore
src/.htaccess src/wp-config.php src/wp-content/uploads/ src/wp-content/upgrade/Docker コマンド
コンテナ表示
$ docker psimage 一覧
$ docker imagesコンテナ起動
-d
を実行すると、コンテナはバックグラウンドで起動し、そのまま実行し続けます。$ docker-compose up -dコンテナ停止
$ docker-compose down本番環境
- AWS で構築
- Public Subnet
- Apatch を install して Web サーバーとする
- Internet Gatewayで外部からの通信を許可
- Private Subnet
- NAT Gatewayを介して外部からの通信を可能するが、サブネットからは通信を不可
- MySQL を install して DB サーバーとする
構成図
SSH でログイン
$ ssh -i {秘密鍵}.pem ec2-user@{IPv4パブリックIP}Web サーバーを踏み台として DB サーバーに SSH ログインして MySQL をinstall
- DB サーバーはインバウンドでInternetと接続してない
- インバウンドで SSH での接続を許可しているので Web サーバーを踏み台に SSH ログインする
- SSH ログインするには pem key を Web サーバーに配置する
- NAT GatewayでPublic Subnetを通してInternetに接続できるようにする
- DB サーバーにログインして MySQL をinstallする
pem key を scp コマンドで Web サーバーにコピーして配置
$ scp -i {秘密鍵}.pem {秘密鍵}.pem ec2-user@{IPv4パブリックIP}:~/DB サーバーに SSH ログイン
$ ssh -i {秘密鍵}.pem ec2-user@{プライベート IPv4 アドレス}参考サイト
MySQL コマンド
MySQL 起動
$ sudo service mysqld startMySQL が起動しているか確認
$ systemctl status mysqld.serviceMySQL にログイン
$ mysql -u root -p初期設定パスワードを変更
mysql> set password for 'root'@'localhost' = '********';データベース
wordpress
を作成CREATE DATABASE wordpress DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;ユーザー ID と PW を設定
mysql> create user '{ユーザーID}'@'%' identified by '{password}';ユーザーに権限を付与
※権限を付与しないと Wordpress のデータベース接続ができないmysql> grant create on *.* to {ユーザーID};ユーザーが作成されたか確認
mysql> select user, host from mysql.user;参考サイト
WordPress をインストール
- Apache が install されている EC2 インスタンスに SSH ログイン
- amazon-linux-extras リポジトリから php を Web サーバーに install
- php7.4 に対応したライブラリの install
- WordPress を install
- WordPress 本体を Apache から見える場所に配置(/var/www/html/)
- ファイルの所有者を apache に変更
- パブリック IPv4 アドレスで WordPress 管理画面が表示される
amazon-linux-extras リポジトリ
のソフトウェア一覧を表示$ amazon-linux-extrasphp7.4 を install
$ sudo amazon-linux-extras install -y php7.4php7.4 に対応したライブラリの install
$ sudo yum install -y php php-mbstringWordPress を install
$ wget https://wordpress.org/latest.tar.gzinstall したフォルダをを解凍
$ tar -xzf latest.tar.gzWordPress 本体を Apache から見える場所に配置(/var/www/html/)
$ cd wordpress/ $ sudo cp -r * /var/www/html/ファイルの所有者を apache に変更
$ sudo chown apache:apache /var/www/html/ -R参考サイト
WordPress とデータベース接続のエラーでハマった点
WordPress を install して管理画面でデータベース接続ができずにハマりました。その対応策としては mysql のユーザー ID に権限を付与してなかったからです。
データベースを使用する権限を付与 part1
エラー文「ユーザー xxx にはデータベース wordpress を使用できる権限がありますか ?」
ユーザーに権限を付与
※権限を付与しないと Wordpress のデータベース接続ができないmysql> grant create on *.* to {ユーザーID};データベースを使用する権限を付与 part2
エラー文WordPress データベースエラー: [SELECT command denied to user '{ユーザーID}'@'{host}' for table 'wp_options']
作成したデータベースを書き込めるようにユーザーに権限を付与
mysql> grant all on wordpress.\* to '{ユーザーID}'@'{host}';Web サーバーから DB サーバーに通信疎通できない場合
エラー文Authentication plugin 'caching_sha2_password' cannot be loaded: /usr/lib64/mysql/plugin/caching_sha2_password.so: cannot open shared object file: No such file or directory
plugin を「caching_sha2_password 」から「mysql_native_password」に変更する
mysql> ALTER USER '{ユーザーID}'@'{host}' IDENTIFIED WITH mysql_native_password BY '{password}';参考サイト
EC2 に git をインストール
EC2 Instanceに SSH ログイン
$ sudo yum -y update $ sudo yum install gitGitHub のアカウント接続する(下記参考サイトを参照)
Apatch の DocumentRoot を変更する
- デフォルトでは
/var/www/html
のファイルがページに表示されるので、それを git で pull したファイルを読むように変更する(下記参考サイトを参照)
/var/www/html
のファイルを/var/tmp/{リポジトリ名/src}
にコピーする$ cp -pR /var/www/html/* /var/lib/{リポジトリ名/src}/設定ファイル
/etc/httpd/conf/httpd.conf
の書き換えDocumentRoot "/var/tmp/{リポジトリ名/src}" <Directory "/var/tmp/{リポジトリ名/src}">Apatch を再起動
$ sudo systemctl restart httpd作成したフォルダ・ファイルの所有者を apache に変更
$ sudo chown apache:apache /var/tmp/{リポジトリ名/src}権限を付与
$ sudo chmod 600 /var/tmp/{リポジトリ名/src}参考サイト
- GitHub ユーザアカウントと GitHub リポジトリ作成 + AWS EC2 から GitHub リポジトリへ push する手順例
- 【Apache】DocumentRoot を変更しよう
- AWS(EC2)で Redmine と Git、Jenkins を使った WordPress 開発環境の構築と公開を行う
以上となります。
これでPublic SubnetのEC2 Instanceの/var/tmp/{リポジトリ名/
でgit pull
すると開発コードが反映されるかと思います。
- 投稿日:2021-01-10T21:18:37+09:00
WordPress環境をDocker(Local)とAWS(Production)で構築
表題の通り、WordPress環境をDockerとAWSで構築したのでその手順についてまとめます。
まとめる内容は以下になります。
- WordPressのLocal環境をDockerで構築
- Webpackでscssとjsをcompileしてthemesディレクトリにoutput
- scssとjsはassetsディレクトリで作業する
- 開発ファイルはGitで管理する
- WordPressのProduction環境をAWSで構築
- Public Subnet、Private SubnetでそれぞれEC2 InstanceにWordPressとMySQLをinstall
- EC2 InstanceにGitを配置して開発ファイルをPullするとLocal作業が反映される
Local環境
- WordPress の Local 環境を Docker で構築
- Webpack で js と scss ファイルを compile して themes に output
Docker image の version
image: mysql:8.0.22 image: wordpress:latestdocker-compose.yamlversion: '3' services: db: image: mysql:8.0.22 volumes: - db_data:/var/lib/mysql restart: always environment: MYSQL_ROOT_PASSWORD: password MYSQL_DATABASE: wordpress MYSQL_USER: admin MYSQL_PASSWORD: password networks: - wpsite phpmyadmin: depends_on: - db image: phpmyadmin/phpmyadmin restart: always ports: - '8080:80' environment: PMA_HOST: db MYSQL_ROOT_PASSWORD: password networks: - wpsite wordpress: depends_on: - db image: wordpress:latest ports: - '8000:80' restart: always volumes: ['./../src:/var/www/html'] environment: WORDPRESS_DB_HOST: db:3306 WORDPRESS_DB_USER: admin WORDPRESS_DB_PASSWORD: password networks: - wpsite networks: wpsite: volumes: db_data:開発作業
- scss と js の作業は
assets
ディレクトリ内で行う(assets/css/
、assets/js/
)assets
ディレクトリ内で Webpack 起動- scss と js を変更すると自動で compile されて themes に output
- js は
runtime.js
とvendors.js
とindex.js
で分割される- jQueryをinstall
webpack.config.jsconst webpack = require('webpack'); const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const themeName = 'original'; module.exports = { mode: 'production', entry: { index: ['./js/index.js', './css/style.scss'], }, output: { filename: 'js/[name].js', path: path.resolve(__dirname, `../src/wp-content/themes/${themeName}`), publicPath: '/', }, optimization: { runtimeChunk: 'single', splitChunks: { cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name: 'vendors', chunks: 'all', }, }, }, }, module: { rules: [ { test: /\.js?$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], }, }, }, { test: /\.scss$/, use: [ { loader: MiniCssExtractPlugin.loader, }, 'css-loader', 'sass-loader', ], }, ], }, plugins: [ new MiniCssExtractPlugin({ filename: 'css/style.css', }), new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', }), ], };webpack 起動コマンド
$ cd assets $ npm startLocal 環境
/docker
ディレクトリに移動して docker(docker-compose up -d
) 起動http://localhost:8000/
が wordpress の local URLhttp://localhost:8080/
が phpmyadmin の local URLtree
assets/js
のファイルをsrc/wp-content/themes/original/js
に webpack で compile├── assets │ ├── css │ │ └── style.scss │ ├── js │ │ └── index.js │ ├── node_modules │ ├── package-lock.json │ ├── package.json │ └── webpack.config.js ├── docker │ └── docker-compose.yaml └── src ├── index.php ├── wp-admin ├── wp-config-sample.php ├── wp-content ├── index.php ├── languages ├── plugins ├── themes ├── index.php ├── original └── css └── style.css └── js └── index.js └── runtime.js └── vendors.jsgitignore
src/.htaccess src/wp-config.php src/wp-content/uploads/ src/wp-content/upgrade/Docker コマンド
コンテナ表示
$ docker psimage 一覧
$ docker imagesコンテナ起動
-d
を実行すると、コンテナはバックグラウンドで起動し、そのまま実行し続けます。$ docker-compose up -dコンテナ停止
$ docker-compose down本番環境
- AWS で構築
- Public Subnet
- Apatch を install して Web サーバーとする
- Internet Gatewayで外部からの通信を許可
- Private Subnet
- NAT Gatewayを介して外部からの通信を可能にするが、サブネットからは通信を不可
- MySQL を install して DB サーバーとする
構成図
SSH でログイン
$ ssh -i {秘密鍵}.pem ec2-user@{IPv4パブリックIP}Web サーバーを踏み台として DB サーバーに SSH ログインして MySQL をinstall
- DB サーバーはインバウンドでInternetと接続してない
- インバウンドで SSH での接続を許可しているので Web サーバーを踏み台に SSH ログインする
- SSH ログインするには pem key を Web サーバーに配置する
- NAT GatewayでPublic Subnetを通してInternetに接続できるようにする
- DB サーバーにログインして MySQL をinstallする
pem key を scp コマンドで Web サーバーにコピーして配置
$ scp -i {秘密鍵}.pem {秘密鍵}.pem ec2-user@{IPv4パブリックIP}:~/DB サーバーに SSH ログイン
$ ssh -i {秘密鍵}.pem ec2-user@{プライベート IPv4 アドレス}参考サイト
MySQL コマンド
MySQL 起動
$ sudo service mysqld startMySQL が起動しているか確認
$ systemctl status mysqld.serviceMySQL にログイン
$ mysql -u root -p初期設定パスワードを変更
mysql> set password for 'root'@'localhost' = '********';データベース
wordpress
を作成CREATE DATABASE wordpress DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;ユーザー ID と PW を設定
mysql> create user '{ユーザーID}'@'%' identified by '{password}';ユーザーに権限を付与
※権限を付与しないと Wordpress のデータベース接続ができないmysql> grant create on *.* to {ユーザーID};ユーザーが作成されたか確認
mysql> select user, host from mysql.user;参考サイト
WordPress をインストール
- Apache が install されている EC2 インスタンスに SSH ログイン
- amazon-linux-extras リポジトリから php を Web サーバーに install
- php7.4 に対応したライブラリの install
- WordPress を install
- WordPress 本体を Apache から見える場所に配置(/var/www/html/)
- ファイルの所有者を apache に変更
- パブリック IPv4 アドレスで WordPress 管理画面が表示される
amazon-linux-extras リポジトリ
のソフトウェア一覧を表示$ amazon-linux-extrasphp7.4 を install
$ sudo amazon-linux-extras install -y php7.4php7.4 に対応したライブラリの install
$ sudo yum install -y php php-mbstringWordPress を install
$ wget https://wordpress.org/latest.tar.gzinstall したフォルダをを解凍
$ tar -xzf latest.tar.gzWordPress 本体を Apache から見える場所に配置(/var/www/html/)
$ cd wordpress/ $ sudo cp -r * /var/www/html/ファイルの所有者を apache に変更
$ sudo chown apache:apache /var/www/html/ -R参考サイト
WordPress とデータベース接続のエラーでハマった点
WordPress を install して管理画面でデータベース接続ができずにハマりました。その対応策としては mysql のユーザー ID に権限を付与してなかったからです。
データベースを使用する権限を付与 part1
エラー文「ユーザー xxx にはデータベース wordpress を使用できる権限がありますか ?」
ユーザーに権限を付与
※権限を付与しないと Wordpress のデータベース接続ができないmysql> grant create on *.* to {ユーザーID};データベースを使用する権限を付与 part2
エラー文WordPress データベースエラー: [SELECT command denied to user '{ユーザーID}'@'{host}' for table 'wp_options']
作成したデータベースを書き込めるようにユーザーに権限を付与
mysql> grant all on wordpress.\* to '{ユーザーID}'@'{host}';Web サーバーから DB サーバーに通信疎通できない場合
エラー文Authentication plugin 'caching_sha2_password' cannot be loaded: /usr/lib64/mysql/plugin/caching_sha2_password.so: cannot open shared object file: No such file or directory
plugin を「caching_sha2_password 」から「mysql_native_password」に変更する
mysql> ALTER USER '{ユーザーID}'@'{host}' IDENTIFIED WITH mysql_native_password BY '{password}';参考サイト
EC2 に git をインストール
EC2 Instanceに SSH ログイン
$ sudo yum -y update $ sudo yum install gitGitHub のアカウント接続する(下記参考サイトを参照)
git clone
を実行したディレクトリは/var/tmp
ディレクトリになります。Apatch の DocumentRoot を変更する
- デフォルトでは
/var/www/html
のファイルがページに表示されるので、それを git で pull したファイルを読むように変更する(下記参考サイトを参照)
/var/www/html
のファイルを/var/tmp/{リポジトリ名/src}
にコピーする$ cp -pR /var/www/html/* /var/lib/{リポジトリ名/src}/設定ファイル
/etc/httpd/conf/httpd.conf
の書き換えDocumentRoot "/var/tmp/{リポジトリ名/src}" <Directory "/var/tmp/{リポジトリ名/src}">Apatch を再起動
$ sudo systemctl restart httpd作成したフォルダ・ファイルの所有者を apache に変更
$ sudo chown apache:apache /var/tmp/{リポジトリ名/src}権限を付与
$ sudo chmod 600 /var/tmp/{リポジトリ名/src}参考サイト
- GitHub ユーザアカウントと GitHub リポジトリ作成 + AWS EC2 から GitHub リポジトリへ push する手順例
- 【Apache】DocumentRoot を変更しよう
- AWS(EC2)で Redmine と Git、Jenkins を使った WordPress 開発環境の構築と公開を行う
以上となります。
これでPublic SubnetのEC2 Instanceの/var/tmp/{リポジトリ名/
でgit pull
すると開発コードが反映されるかと思います。
- 投稿日:2021-01-10T20:12:47+09:00
【個人メモ】Gitで歴史を改竄する
AuthorとCommitterを変更する
GitのCommitユーザを修正する方法 - Qiitaに少し手を加えました。
-- --all
ですべてのブランチを指定している(らしい)。
--tag-name-filter cat
でタグが紐付けされているコミットIDも一緒に変えてくれる(らしい)。git filter-branch -f --env-filter "GIT_AUTHOR_NAME='new'; GIT_AUTHOR_EMAIL='new@example.com'; GIT_COMMITTER_NAME='new'; GIT_COMMITTER_EMAIL='new@example.com';" --tag-name-filter cat -- --allあるファイルを過去からも消し去る
git filter-branch -f --index-filter 'git rm -rf --ignore-unmatch <プロジェクトのルート(.gitがあるとこ)からの相対パス>' --prune-empty --tag-name-filter cat -- --all改竄したものをプッシュする時
git push -f git push origin --tags -f
- 投稿日:2021-01-10T19:30:31+09:00
【備忘録】Git, GitHubの使い方
- GitHubでリモートリポジトリ作成
- ローカルでディレクトリ作成
git init
し git の管理下に(ローカルリポジトリ作成)- なんかファイル作る
git add .
でステージングgit commit -m [message]
でローカルリポジトリに反映git remote add origin https://github.com/[ユーザー名]/[1で作成したリモートリポジトリ名].git
で GitHub と紐づけgit push origin main
でリモートリポジトリにプッシュ8番で master ではなく main としているのは、Git のデフォルトリポジトリ名を main に変更しているからで、これは GitHub のデフォルトリポジトリ名に合わせた。
変更する場合は、最新の Git だと、インストール時に main に設定するか聞かれるので、そこで設定する。バージョンが古い場合は、アップデートすると、同じく設定するか聞かれる。もし master のまま push してしまうと、GitHub に新しく master ブランチが作られ、チームで開発する際、Aさんは master から開発をはじめ、Bさんは main から開発をはじめ、元のブランチが違うためマージできない、ということが起こるらしいので注意する。
- 投稿日:2021-01-10T10:58:39+09:00
masterにコミットしてしまった修正をブランチに移動したい
目的
ブランチを切って作業すべきところを、間違えてmaster上で作業してコミットしてしまった。
$ git branch * master $ git log --oneline 9491e2d add Z 877a87e add Y 5301865 add X 0846a50 initial commitこのままだと pull requestも出せないし、自部署の gitリポジトリは masterへの pushを禁じているのでどうにかしたい、という話
手順
masterからブランチ branchXYZを作成。
$ git checkout -b branchXYZ $ git log --oneline 9491e2d add Z 877a87e add Y 5301865 add X 0846a50 initial commit次にmasterのコミットを巻き戻す
$ git checkout master $ git reset --hard HEAD~3 HEAD is now at 0846a50 initial commit $ git log --oneline 0846a50 initial commitあとは branchXYZを pushして pull requestを出せば解決
- 投稿日:2021-01-10T03:49:43+09:00
git githubをwslで使う
gitの準備
github desktopを使えばatomなどで編集し,guiでコミットやプッシュができるが,コマンドで使用する方法としてWSLのUbuntuでやる方法
WSLでgit連携
shell$ sudo apt get install git $ git config --global user.name USERNAME $ git config --global user.email hogehoge@gmail.comあらかじめgitのアカウントをwebで作成しておく.
公開鍵をgithubに登録する
$ssh-keygen -t rsa -C "hogehoge@gmail.com" $cat ~/.ssh/id_rsa.pubパスフレーズを任意で入力する.githubのパスワードとは違うもので,空欄でも問題ない.
- github.comでマイページに行く
- setting を選択する
- SSH and GPG key を選択する
- New SSH key を選択する
- コピペで公開鍵を張り付けて保存.
- 上記のパスフレーズを入力.
$ ssh -T git@github.comで問題なければ完了.
あとは普通にリポジトリクローンしたりプッシュしたりできる.gitで使うコマンド
$git clone
新規でリモートからリポジトリをコピー
$git pull origine
リモートからリポジトリをコピーしてくる
$git status
編集中なら赤字,ステージング中なら緑字
$git commit -m "coment"
リモートへコミットする
$git add .
ステージングする
$git log
コミットの歴史
$git push origin
ローカルへプッシュするブランチを切る(編集中)
$git checkout -b develop master
$git checker -b develop master
$git branch
ブランチをマージする(編集中)
$git chekout -b develop
$git push origine develop
```$git merge debelop origine
- 投稿日:2021-01-10T03:49:43+09:00
git githubをwslで使う 初心者用
gitを使ったことがない初心者がgit環境を整えて,コミット,プッシュ,マージ,コンフリクト解決ができるようになるまでを,具体的なコマンドを実行しながら練習するための覚え書き.
gitの準備
github desktopを使えばatomなどで編集し,guiでコミットやプッシュができるが,コマンドで使用する方法としてWSLのUbuntuでやる方法
WSLでgit連携
shell$ sudo apt get install git $ git config --global user.name USERNAME $ git config --global user.email hogehoge@gmail.com公開鍵をgithubに登録する
$ssh-keygen -t rsa -C "hogehoge@gmail.com" $cat ~/.ssh/id_rsa.pubパスフレーズを任意で入力する.githubのパスワードとは違うもので,空欄でも問題ない. 以下の順に操作
- github.comでマイページに行く
- setting を選択する
- SSH and GPG key を選択する
- New SSH key を選択する
- コピペで公開鍵を張り付けて保存.
- 上記のパスフレーズを入力.
$ ssh -T git@github.comで確認してみる.
あとは普通にリポジトリクローンしたりプッシュしたりできる.gitを始める
$mkdir hoge $cd hoge $git initこれでこのディレクトリに.gitができる.
/hoge/.git/
この.gitが存在している場所/hoge/下がgitの管理下である.なぜinitが必要?
たんにgit cloneするだけでは,コードをダウンロードしただけに過ぎない.
initコマンドでそのディレクトはgitのローカルのリポジトリ機能がつかえる.
さらにリモートと連携することで,push,pullなどを用いてサーバ上へ変更を反映することができる.いちいちリモートを切り替えないといけない?
(git管理下になっているディレクトリはストレージ内にいくつか存在でき,それぞれのgitディレクトリはそれぞれのリモートと関連付けらている.ディレクトリに移動するだけでリモートは切り替わる.)このままではリモートのリポジトリと連携ていないので,Tarouさんのtestというリポジトリと連携してみると,
$git remote add origin git@github.com:Tarou/test.git上このディレクトリ(リポジトリ)をリモート(URL先)に関連づけるコマンド.
任意のURLを張り付ければよい.このときプライベート設定ならパスフレーズを要求される.もしくは単に
$git clone git@github.com:Tarou/test.gitとすれば
/hoge/test/.git
`ができる.これだとリポジトリ名のディレクトリが作られる_.すでにPCに開発したプログラムがあって,リモートへ送りたいだけならcloneしないほうがよいかも.$git remote -v prigin git@github.com:Tarou/test.git (fetch) prigin git@github.com:Tarou/test.git (push)と出れば成功.
リモート先のファイルをダウンロードするorローカルのファイルをリモートへ送るには,download$git pull originesending$git add -A $git status $git commit -m "first commit" $git log $git diff Head $git push origine mastergitで使うコマンドの説明
$git clone
新規でリモートからリポジトリをコピー
$git pull origine
リモートからリポジトリをコピーしてくる
$git status
編集中なら赤字,ステージング中なら緑字
$git commit -m "coment"
リモートへコミットする
$git add .
ステージングする
$git log
コミットの歴史
--Graph ツリー表示
--oneline 1コミット1行
$git push origin
ローカルへプッシュする
$git pull
リモートからダウンロードしてマージもする
pull=fetch+mergeということ
$git fetch
リモートからダウンロード
名もなきブランチ扱い:FETCH_HEADでチャックアウトできる
$git branch -d develop
ブランチdevellopを削除するブランチ
developというブランチ名でブランチしてみる.
$git chekout -b developブランチを切る
git branch develop
とそのブランチに入るgit checkout develop
を一気に行うオプションである.
git branch
でブランチを一覧できる.ブランチの中で作業してリモートのブランチにプッシュする.
$git add -A $git commit -m "dev"ローカルで何度かコミットなどして,ある程度できたらリモートへプッシュする.
$git push origine developそうして初めてリモート上でブランチの存在が認知される.
これをマスターへ融合させる.この間にマスターは特に変更されてないなら自動でマージできる.$git checkout master $git merge developほかにもブランチがあったとしても先にマージされたブランチが方が正統派となる.
ここでエラーがでるなら,ファイルを開いて編集する.
この編集作業自体がマージにほかならない.作業内容を記録するためにコミットしておく.$git add -A $git commit -m "develop merge ok!"ただし,コンフリクトが起きることがわかっているなら,あらかじめdevelop側で現在のmasterをマージしておいてから,master側でマージをするほうが礼儀正しいはずである(土足で入るようなもの).
気になる場合はリベースでやり直してみる.
$ git reset --hard HEAD~ $ git checkout develop $ git rebase masterそしてコンフリクトを手動で直す作業...
$ git add A $ git rebase --continueこの時点で一応commit,pushを残しておいてもいいかも.
このリベースは単にまだmasterにマージするつもりはなくても,masterの最新情報をdevelopに与えておくのに使うときれいに開発できるはず.
$git rebase --abort
でリベースを取り消し.$ git checkout master $ git merge developこれで自動的にマージされる.(というかdevelop側ですでにマージが終わっているものを受け入れてもらっているだけ.)
- 投稿日:2021-01-10T02:39:35+09:00
【git】 Argument list too long に対する対処法
※当方駆け出しエンジニアのため、間違っていることも多々あると思いますので、ご了承ください。また、間違いに気付いた方はご一報いただけると幸いです。
Argument list too long に対する対処法
git commitしようとした際に、下記のようなエラー表示がなされることがある。
「 /Library/Developer/CommandLineTools/usr/libexec/git-core/git: Argument list too long」
これは、bundle install で取り込んだ大量のファイルなどを含めてコミットしようとした際に表示されるエラー文です。
bundle instalでインストールするファイル自体は、コミットに含める必要はないので外してしまいます。
(gemファイルにインストールすべきファイルが記載してあるので)まず、.gitignoreに、git対象から外したいファイルを記載します。(今回であればvendor)
gitignore.vendor/次にGitのキャッシュから、対象ファイルを削除します。
git rm -r --cached vendor/