20210110のGitに関する記事は11件です。

【メモ】【自分用】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 'ブランチ名'
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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まで」について記載しました。
 至らない点が、多いかもしれませんが、少しでも多くの方の参考になれば幸いです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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:latest
docker-compose.yaml
version: '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.jsvendors.jsindex.jsで分割される
  • jQueryをinstall
webpack.config.js
const 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 start

Local 環境

  1. /dockerディレクトリに移動して docker(docker-compose up -d) 起動
  2. http://localhost:8000/が wordpress の local URL
  3. http://localhost:8080/が phpmyadmin の local URL

tree

  • 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.js

gitignore

src/.htaccess
src/wp-config.php
src/wp-content/uploads/
src/wp-content/upgrade/

Docker コマンド

コンテナ表示

$ docker ps

image 一覧

$ 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 サーバーとする

構成図

WordPress環境(docker(local)、AWS(prod))

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 start

MySQL が起動しているか確認

$ systemctl status mysqld.service

MySQL にログイン

$ 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-extras

php7.4 を install

$ sudo amazon-linux-extras install -y php7.4

php7.4 に対応したライブラリの install

$ sudo yum install -y php php-mbstring

WordPress を install

$ wget https://wordpress.org/latest.tar.gz

install したフォルダをを解凍

$ tar -xzf latest.tar.gz

WordPress 本体を 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 git

GitHub のアカウント接続する(下記参考サイトを参照)

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}

参考サイト

以上となります。
これでPublic SubnetのEC2 Instanceの/var/tmp/{リポジトリ名/git pullすると開発コードが反映されるかと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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:latest
docker-compose.yaml
version: '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.jsvendors.jsindex.jsで分割される
  • jQueryをinstall
webpack.config.js
const 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 start

Local 環境

  1. /dockerディレクトリに移動して docker(docker-compose up -d) 起動
  2. http://localhost:8000/が wordpress の local URL
  3. http://localhost:8080/が phpmyadmin の local URL

tree

  • 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.js

gitignore

src/.htaccess
src/wp-config.php
src/wp-content/uploads/
src/wp-content/upgrade/

Docker コマンド

コンテナ表示

$ docker ps

image 一覧

$ 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 サーバーとする

構成図

WordPress環境(docker(local)、AWS(prod))

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 start

MySQL が起動しているか確認

$ systemctl status mysqld.service

MySQL にログイン

$ 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-extras

php7.4 を install

$ sudo amazon-linux-extras install -y php7.4

php7.4 に対応したライブラリの install

$ sudo yum install -y php php-mbstring

WordPress を install

$ wget https://wordpress.org/latest.tar.gz

install したフォルダをを解凍

$ tar -xzf latest.tar.gz

WordPress 本体を 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 git

GitHub のアカウント接続する(下記参考サイトを参照)

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}

参考サイト

以上となります。
これでPublic SubnetのEC2 Instanceの/var/tmp/{リポジトリ名/git pullすると開発コードが反映されるかと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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:latest
docker-compose.yaml
version: '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.jsvendors.jsindex.jsで分割される
  • jQueryをinstall
webpack.config.js
const 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 start

Local 環境

  1. /dockerディレクトリに移動して docker(docker-compose up -d) 起動
  2. http://localhost:8000/が wordpress の local URL
  3. http://localhost:8080/が phpmyadmin の local URL

tree

  • 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.js

gitignore

src/.htaccess
src/wp-config.php
src/wp-content/uploads/
src/wp-content/upgrade/

Docker コマンド

コンテナ表示

$ docker ps

image 一覧

$ 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 サーバーとする

構成図

WordPress環境(docker(local)、AWS(prod))

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 start

MySQL が起動しているか確認

$ systemctl status mysqld.service

MySQL にログイン

$ 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-extras

php7.4 を install

$ sudo amazon-linux-extras install -y php7.4

php7.4 に対応したライブラリの install

$ sudo yum install -y php php-mbstring

WordPress を install

$ wget https://wordpress.org/latest.tar.gz

install したフォルダをを解凍

$ tar -xzf latest.tar.gz

WordPress 本体を 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 git

GitHub のアカウント接続する(下記参考サイトを参照)
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}

参考サイト

以上となります。
これでPublic SubnetのEC2 Instanceの/var/tmp/{リポジトリ名/git pullすると開発コードが反映されるかと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【個人メモ】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
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【備忘録】Git, GitHubの使い方

  1. GitHubでリモートリポジトリ作成
  2. ローカルでディレクトリ作成
  3. git init し git の管理下に(ローカルリポジトリ作成)
  4. なんかファイル作る
  5. git add . でステージング
  6. git commit -m [message] でローカルリポジトリに反映
  7. git remote add origin https://github.com/[ユーザー名]/[1で作成したリモートリポジトリ名].gitで GitHub と紐づけ
  8. git push origin mainでリモートリポジトリにプッシュ

8番で master ではなく main としているのは、Git のデフォルトリポジトリ名を main に変更しているからで、これは GitHub のデフォルトリポジトリ名に合わせた。
変更する場合は、最新の Git だと、インストール時に main に設定するか聞かれるので、そこで設定する。バージョンが古い場合は、アップデートすると、同じく設定するか聞かれる。

もし master のまま push してしまうと、GitHub に新しく master ブランチが作られ、チームで開発する際、Aさんは master から開発をはじめ、Bさんは main から開発をはじめ、元のブランチが違うためマージできない、ということが起こるらしいので注意する。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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を出せば解決

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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 origine 
sending
$git add -A
$git status
$git commit -m "first commit"
$git log
$git diff Head 
$git push origine master

gitで使うコマンドの説明

$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側ですでにマージが終わっているものを受け入れてもらっているだけ.)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【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/
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む