VirtualBoxにCentOS7をインスートールした話
はじめに
今回はLAMP環境を作成する練習としてVirtualBoxを用いてCentOS7を動かすための環境設定を行なった。
CentOS7のイメージをインストール
CentOS7系のダウンロードページからイメージをダウンロードします。
VMを作成
以下の手順でVMを作成します。
VM内にCentOS7をインストール
ネットワークの設定
今後yumを用いたインストール作業を行うので、外部に接続できるようにネットワークの設定を行う
- virtualboxでホストオンリーアダプターを利用して、SSH接続を行う｜Windows10 - Qiita
- 【VirtualBox】CentOS@VirtualBoxでホストOSとゲストOSでsshするときのネットワーク設定メモ - NAT、ホストオンリーアダプターを設定してeth0、eth1を有効にする - tweeeetyのぶろぐ的めも
ネットワーク設定をしたのに動かない時
以下のコマンドでethernetのデバイスと繋がっているか確認する。
$ nmcli d
繋がっていない場合は以下のコマンドで繋げる
$ nmcli connect up デバイス名
CentOSにユーザーを設定
useraddコマンドでユーザーを作成して作れたかを確認。(今回はkkzooというユーザーを作成する)
$ sudo useradd -d /home/kkzoo -s /bin/bash kkzoo $ cat /etc/passwd | grep kkzoo
ユーザーkkzooにパスワードを設定します。
$ sudo passwd kkzoo
rootからexitで出たのちにゲストユーザーでログインできたら終了
sudoを追加
- root権限でログイン
visudoコマンドを実行# %wheel ALL=(ALL)ALLのコメントを外す(#を消す)usermod -G wheel ユーザー名後に再ログインしたらsudoが使える
終わりに
ローカルにLAMP環境設計の練習として、VirtualBoxにCentOS7の環境を構築した。 ネットワーク周りの設定に躓くことが多くて大変だった。
MySQLを用いてデータベース操作をやった話
はじめに
今回はMySQLを用いたデータの基本操作について学んだのでまとめていく。
MySQL操作について
データベースを確認
mysqlにログイン後にshowコマンドで見ることができる。
mysql> show databases;
データベースの作成と削除
createでデータベースを作れて、dropで消すことができる。
mysql> create database KKZoo_db01; mysql> drop database KKZoo_db01;
操作するデータベースを選択する
useコマンドで操作対象を決めて、selectで確認する。
mysql> use database KKZoo_db01; mysql> select database();
ログイン時に操作対象を決めることもできる。
$ mysql -u root KKZoo_db01
テーブル操作について
テーブルを作成と削除
create tableでテーブルを作成でき、drop tableでテーブルを削除できる
今回はusersテーブルにid, name, age属性を付与する。
mysql> create table users(id int unsigned, name varchar(32), age int); mysql> drop table users;
テーブルの確認
showで一覧でusersが出来ていることを確認し、descで中身を確認する
mysql> show tables; mysql> desc users;
データの挿入
insertコマンドでデータを挿入することができる。
musql> insert into users (id, name, age) values (1, 'KKZ', null);
データ挿入の応用編
create tableをする際にオートインクリメント属性とプライマリーキーを付与できる。
mysql> create table users(id int unsigned auto_increment not null primary key, name varchar(32), age int); mysql> desc users; +-------+--------------+------+-----+---------+----------------+ | Field | Type | Null | Key | Default | Extra | +-------+--------------+------+-----+---------+----------------+ | id | int unsigned | NO | PRI | NULL | auto_increment | | name | varchar(32) | YES | | NULL | | | age | int | YES | | NULL | | +-------+--------------+------+-----+---------+----------------+
上記の状態のテーブルにはidが自動で入力されるのでidを指定せずにデータベースにデータをinsertできる。
mysql> insert into users(name, age) values('KKZoo', 20);
データベースから値を取得する
selectコマンドを用いることでデータを取得できる。
*を用いてテーブル全体を呼び出すか、カラム名を直接指定することができる。
mysql> select * from users; mysql> select name,age from users;
条件づけられた値を取得する方法
以下のようなテーブルから20才未満のデータを取り出します。
mysql> select * from users; +----+---------+------+ | id | name | age | +----+---------+------+ | 1 | KKZoo | 20 | | 2 | higa | 25 | | 3 | sato | 18 | | 4 | arakawa | 32 | | 5 | tanaka | 30 | +----+---------+------+
where文を用いることで可能となる。
使える比較演算子はここを参照。
mysql> select * from users where age < 20; +----+------+------+ | id | name | age | +----+------+------+ | 3 | sato | 18 | +----+------+------+
データをソートして表示
order byを用いることでソートすることができる。
order byの使い方。
mysql> select * from users order by age asc; +----+---------+------+ | id | name | age | +----+---------+------+ | 3 | sato | 18 | | 1 | KKZoo | 20 | | 2 | higa | 25 | | 5 | tanaka | 30 | | 4 | arakawa | 32 | +----+---------+------+
表示件数に制限をつける
limitを用いることでデータの取得件数に制限をかけることができる。
mysql> select * from users limit 2; +----+-------+------+ | id | name | age | +----+-------+------+ | 1 | KKZoo | 20 | | 2 | higa | 25 | +----+-------+------+ 2 rows in set (0.00 sec)
テーブルの任意のデータを更新
updateを用いることで任意のデータを更新することができるが、条件を指定しないと全件指定となるので、whereで条件を記載してデータを選択し、setでカラム名を決めて更新後のデータを新規挿入するのが基本操作になる。
mysql> update users set age = 100 where id = 1; mysql> select * from users where id = 1; +----+-------+------+ | id | name | age | +----+-------+------+ | 1 | KKZoo | 100 | +----+-------+------+
テーブルの任意のデータを削除
deleteを用いることでテーブルの任意のデータを削除することができる。
mysql> delete from users where id = 1; mysql> select * from users; +----+---------+------+ | id | name | age | +----+---------+------+ | 2 | higa | 25 | | 3 | sato | 18 | | 4 | arakawa | 32 | | 5 | tanaka | 30 | +----+---------+------+
終わりに
今回はMySQLを用いることでデータベース操作を行うことで、操作の仕方を思い出すきっかけになった。
MySQLを再インストールして動くようになった話
はじめに
今回はMySQLを久々に使用した際にサーバー立ち上がらなかったのでトラブルシューティングした記録を記述していく。
.pidを作る
私もpidファイルがないとのことだったので以下の記事同様にtouchでpidファイルを作ったのですが動かなかった。
MySQL起動できなくなった The server quit without updating PID file - Qiita
再インストール
色々調べてみても私の検索力じゃ同様の対応が多く、困り果て再インストールしてみることにした。
$ brew uninstall mysql $ brew install mysql
挙動を確認するためにサーバースタートここでSUCCESSと返って来れば成功です。
$ mysql.server start
うまく動いて来れた！！ 確認を終えたらサーバーストップします。
$ mysql.server stop
終わりに
再インストールでうまく行って来れて助かりました。
gitの基礎勉強-リモートを用いた場合-
はじめに
今回はgitのリモートリポジトリの扱いについてまとめてみました。
GitHubの運用
git push
git pushを用いることでリモートリポジトリにローカルの内容をアップロードすることができる。
$ git remote add origin github-url $ git push origin branch-name
git clone
git cloneを用いることでリモートリポジトリーをローカル環境へダウンロードすることができる。
$ git clone github-url
git pull
git pullを用いることでリモートの更新状態をローカルリポジトリにダウンロードできる。
$ git pull
git fetch
git fetchを用いることでリモートの更新状況を把握することができる。
$ git fetch origin
なお、リモートの最新状態との差分をとりたい場合は以下のようにすると良い。
$ git diff origin/master
git branch の削除
ローカルブランチの削除はbranchコマンドに--deleteオプションをつけるとできる。
$ git branch --delete branch-name
リモートブランチの削除方法はpushコマンドに--deleteオプションをつけると良い。
$ git push --delete origin branch-name
GitHubのワークフロー
実際の開発では
- masterで
git fetch - masterで
git pull - 開発用ブランチで
git push - プッシュした内容を上長に確認(プルリク)
- Goサインがもらえたらmasterにmerge
を繰り返すようだ。
終わりに
今回gitについてローカル、リモート両方学ぶことで以前よりもgitについて知識量が増えたと感じた。
ローカルの場合はgit resetやgit revertや-abortオプションの知識を積むことができたおかげでgit操作の幅が増えたと思う。
また、リモートに関してはgit fetchやgit pullは個人開発の範囲では使うことがないので良い知識が詰めたと思う。
gitの基礎勉強-ローカルリポジトリでの操作-
はじめに
gitを用いてソースをウェブに公開しつつ管理をしていて、commitの変更の仕方はどうしたら良いのかと困ったことがあったので、gitの扱い方を改めて勉強してみました。
git
今回は勉強用に以下のファイル構造のファイルを用意した
. └── git-practice.rb
git を新規作成
git initをすることで初期化された.gitを作成しれくれます。
$ git init
gitの状態を見る
git statusでgitの状態を見ることができて、変更がなければ以下の状態でオールグリーンになる。
$ git status On branch master nothing to commit, working tree clean
変更が前回から変更があるファイルが存在する時は以下のコメントが返ってくる。
On branch master
No commits yet
Untracked files:
(use "git add <file>..." to include in what will be committed)
git-practice.rb
nothing added to commit but untracked files present (use "git add" to track)
上記の文で正しい状態ならgit addをすることでコミット準備が整う。
On branch master
No commits yet
Changes to be committed:
(use "git rm --cached <file>..." to unstage)
new file: git-practice.rb
ローカルリポジトリにコミットする
コミットをすることでgitの変更ツリーに登録される。
$ git add . $ git commit -m "first commit"
コミットメッセージの変更
--amendオプションを使うことで1つ前のコミットメッセージを変更できる。
$ git commit --amend -m "update commit message"
gitのログを見る
git logでgitでのログを確認することができる。
取れる値は
commitのハッシュ値- 作者: (email address)
- コミットした日付
- コミットメッセージ
$ git log
-p オプションをつけることで前回との差分を取得でき、上記以外に以下のように更新情報が入る。
--- /dev/null +++ b/git-practice.rb @@ -0,0 +1 @@ +p "Hello World"
上記の差分だけ欲しい時はgit diffがある。
$ git diff
前回のコミット内容全てとの差分が欲しい時はHEADを指定する。
※前回のコミット時にはなかったファイルの追加については比較されない。
$ git diff HEAD
git commitを消す方法
git revertを用いることでcommitを消すことができる。
やり方はgit logでcommitのハッシュを取得してきて、そのハッシュ値にrevertをかけると良い。(基本的にはHEADで1つ前だけをrevertする)
$ git log $ git revert ハッシュ値
git revertが失敗したら--abortオプションを使うことで前回のrevertがなかったことになる。
$ git revert --abort
コミットログごと全て消す場合
git reset --hardを用いることで、指定したコミットから最新のコミットまでのコミットログを消します。
$ git reset --hard コミットハッシュ値
謝ってgit resetで全て消してしまった場合の対応git reflogで戻りたいHEAD番号を取得して元に戻す。
以下では1個前のreset時の記録を無かったことにする。
$ git reflog
$ git reset --hard HEAD@{1}
`git reflog` についてまとめてみる · GitHub
ブランチの切り替え
git branchでブランチを作成して、git checkoutでブランチを切り替える。
$ git branch branch-name $ git branch branch-name
ブランチのマージ
masterブランチに移動してマージしたいブランチをマージする。
$ git checkout master $ git merge --no-ff branch-name
コンフリクトの対応
mergeを行なっていたらコンフリクトに会うこともあります。
その時のエラーログは以下のようになってコンフリクトを起こしていることを教えてくれます。
Auto-merging git-practice.rb CONFLICT (content): Merge conflict in git-practice.rb Automatic merge failed; fix conflicts and then commit the result
対応としてはgit diffをとることで対応の箇所が出てきます。
diff --cc git-practice.rb index dc1042d,13b9d2f..0000000 --- a/git-practice.rb +++ b/git-practice.rb @@@ -2,4 -2,4 +2,8 @@@ p "こんにちは p "revertで消します" p "practice-branchで修正した" ++<<<<<<< HEAD +p "test-aで追加" ++======= + p "test-bで追加" ++>>>>>>> test-b
今回はtest-bを残すとして、対応のファイルのHEADと===の間と>>>を消してあげて以下の状態にしてコミットします。
p "test-bで追加"
終わりに
今回はローカルで行う操作のまとめを行いましたが、次はリモートを用いたgit操作を学び直したいと思います。
Nxut.jsの基礎を学んでみて
はじめに
Nuxt.jsの基礎部分の勉強を一通り区切りがついたので今回も纏めてみました。
参考にしたコンテンツやサイト
私が参考にしたサイトやコンテンツは基本的に以下の２つです。
コードは以下に上げています。
書いた記事まとめ
- npxコマンドを使うためにNode.jsをインストールした話 - KKZooの備忘録
- Nuxt.jsの基礎勉強~ create-nuxt-appでプロジェクトの作成やファイル構造~ - KKZooの備忘録
- Nuxt.jsの基礎勉強-ファイル構造の理解を深める- - KKZooの備忘録
- Nuxt.jsの基礎勉強-vuexの使い方について- - KKZooの備忘録
- Nuxt.jsの基礎勉強-カウンターアプリを作成- - KKZooの備忘録
- Nuxt.jsの基礎勉強-firebaseと連携したToDoアプリ1- - KKZooの備忘録
- Nuxt.jsの基礎勉強-firebaseと連携したToDoアプリ2- - KKZooの備忘録
終わりに
Vue.js同様に今回もUdemyでの動画学習を基本軸としてNuxt.jsの勉強をしました。
飽き性なので、今回も一通り講座を終了することができてホッとしていると同時に新しい知識をつけることができて非常に良い時間を過ごすことができたなと感じています。
Nuxt.jsの基礎勉強-firebaseと連携したToDoアプリ2-
はじめに
今回は前回の記事の続きを記述していく。
page側でfirebaseにあるデータを取得して表示
- idをキーに指定して、v-forを用いてtodosを展開することで表示することができる
<ul>
<li v-for="todo in todos" :key="todo.id">
<span v-if="todo.created">
(略)
<span v-bind:class="{ done: todo.done }">
{{ todo.name }},
{{ todo.created.toDate() | dateFilter}}
</span>
(略)
</span>
</li>
</ul>
(略)
<script>
computed: {
todos(){
return this.$store.state.todos.todos
}
</script>
<style>
li> span> span.done{
text-decoration: line-through;
}
</style>>
remove処理の追加
storeにremove処理を記述
~/store/todos.jsのexport const actionsにremove:を追加- フォームからidを取得してきて、渡されたidを元にデータベース側の値をdelete()で消している。
remove: firestoreAction((context, id) => { todosRef.doc(id).delete() }),
page側で出力
- ボタンを作成して、methodsからremoveメソッドを読み込んでいる
<li v-for="todo in todos" :key="todo.id"> <span v-if="todo.created"> （略） <button @click="remove(todo.id)">Delete</button> </span> </li>
- methods内にてactionにidの値を渡している。
remove(id){ this.$store.dispatch('todos/remove', id) },
checkboxの追加
storeにてtoggleの操作を記述
~/store/todos.jsのexport const actionsにてtoggleの処理について記述- 真偽値なのでボタンが押されたら値を反転すれば良い
remove: firestoreAction((context, id) => { todosRef.doc(id).delete() }),
page側でtoggle処理のactionを読み込み
~/page/todos.vueのtemplateにてmethodsのtoggleに値を渡している
<input type="checkbox" :checked="todo.done" @change="toggle(todo)">
~/page/todos.vueのmethosにてtoggleの現在の値をアクションに渡している
toggle(todo){ this.$store.dispatch('todos/toggle', todo) }
フォーマットの変更
momentを用いた時間の成形
- momentをインストールする
$ npm install --save moment
~/page/todos.vueにフィルターを作って{{ todo.created.toDate() | dateFilter}}にフィルターをかける
filters: { dateFilter: function(date){ return moment(date).format('YYYY/MM/DD HH:mm') } }
lodashを用いたソート
~/nuxt.config.jsにwebpackをrequireして以下を記述
const webpack = require('webpack') export default { (中略) /* ** Build configuration ** See https://nuxtjs.org/api/configuration-build/ */ build: { plugins: [ new webpack.ProvidePlugin({ '_': 'lodash' }) ] }
~/store/todos.jsの最下部に以下を記述
export const getters = {
orderdTodos: state => {
return _.sortBy(state.todos, 'created')
}
}
終わりに
今回はfirebaseと連携を行なったため、新しい記述の仕方が多くて写経するので精一杯であったが、ブログにアウトプットすることでしっかりソースコードを追えたのはいいことだと思う。
