Laradock v5で開発環境を構築してみた
お久しぶりです。
1週間ぶりの投稿です。
今回は、Laravel ✗ Dockerを実現したLaradockで開発環境を構築しました。
最新バージョンのLaradock v5(20180809時点)は、v4と若干設定ファイルの中身が違うようなので、紹介したいと思います。
前提条件
1. Gitコマンドがインストールされている。
2. Dockerがインストールされている。
3. composerがインストールされている。
4. 80番ポートが未使用である。
手順
1. 作業ディレクトリを作成する。
$ mkdir [dir_name] $ cd [dir_name]
2. Laravelのプロジェクトを作成する。
$ composer create-project --prefer-dist laravel/laravel [app_name]
3. Laradockをクローンする。
$ git clone https://github.com/Laradock/laradock.git
$ cd laradock
4. 設定ファイルをコピーする。
$ cp env-example .env
5. 設定ファイルを編集する。
$ vim .env # 8行目: アプリのパス 変更前: APP_CODE_PATH_HOST=../ 変更後: APP_CODE_PATH_HOST=../[app_name] # 181行目: MySQLのDB名を変更 変更前: MYSQL_DATABASE=defulat 変更後: MYSQL_DATABASE=[app_name]
6. Nginxの設定ファイルを変更する。
この時、Chromeではxxx.devにすると、強制的にリダイレクトするようなので、その他のものにしましょう!
$ vim nginx/sites/default.conf # 6行目: バーチャルホストを設定 変更前: server_name localhost 変更後: server_name [app_name].io
7. MySQLのファイルを変更する。
$ vim mysql/my.cnf # [mysqld]の最終行に追加 default_authentication_plugin = mysql_native_password
$ vim mysql/docker-entrypoint-initdb.d/createdb.sql.example # 以下のように修正 CREATE USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'root'; CREATE USER 'root'@'%' IDENTIFIED WITH mysql_native_password BY 'root'; GRANT ALL PRIVILEGES ON [app_name].* TO 'root'@'localhost' WITH GRANT OPTION; GRANT ALL PRIVILEGES ON [app_name].* TO 'root'@'%' WITH GRANT OPTION; FLUSH PRIVILEGES;
8. ホストの設定ファイルを変更する。
# Macの場合 $ sudo vim /etc/hosts # 最終行に追加 127.0.0.1 [app_name].io
9. Dockerを起動する。
$ docker-compose up -d nginx mysql phpmyadmin redis workspace
10. http://[app_name].io/にアクセスする。
11. データベースを作成する。
$ docker-compose exec workspace bash $ php artisan migrate $ exit
12. phpMyAdmin(http://[app_name].io:8080/)からデータベースにログインできることを確認する。
- サーバ: mysql
- ユーザ名: root
- パスワード: root
まとめ
簡単すぎる!!!!!
スプレッドシートの内容を自動でGitHubにissueとして追加してみた
みなさん、お久しぶりです!
約1年半ぶりの記事投稿になります。
あの頃は学生でしたが、現在は社会人になって東京でエンジニアとして日々努力しています。
GitHubで複数のissueを作成するのは非常に手間なので、自動で作成する仕組みを作りたいと思います。
今回はGoogle App Script(GAS)を利用してスプレッドシートから作成します。
準備
まず、以下のページからトークンの発行をします。
注意としては、自分がオーナーであるリポジトリのトークンしか発行できないようです。
github.com
データ
今回は、以下のようなデータをissueとして追加します。
コーディング
変数「payload」にissueの情報を設定していますが、他にもパラメータを追加したい場合は、こちらのGitHub Developerのドキュメントを参照してください。
// GitHubの情報 var REPO = "レポジトリ名", OWNER = "オーナー名", ACCESS_TOKEN = "トークン"; function index() { var sheet = SpreadsheetApp.getActiveSheet(); values = sheet.getDataRange().getValues(); for (var i = 1; i < values.length; i++) { var payload = { "title": values[i][1], "body": values[i][2], "assignees": [ values[i][3] ], }; issueTickets(payload); } } // GitHubでチケットを発行する関数 function issueTickets(payload) { var url = "https://api.github.com/repos/"+ OWNER + "/" + REPO + "/issues"; var header = { "Authorization": "Basic " + Utilities.base64Encode(ACCESS_TOKEN), "Accept": "application/vnd.github.symmetra-preview+json", "Content-Type": "application/json", }; var options = { "method" : "post", "payload" : JSON.stringify(payload), "headers" : header, }; UrlFetchApp.fetch(url, options); }
GitHub
結果、こんな感じで正常に追加されています。
まとめ
これで、無駄な作業を減らして快適な開発をできるかと思います!
DjangoでWebアプリを開発(1)
お久しぶりです。
約2ヶ月ぶりの投稿です。
今回は、Pythonで最も使われているフレームワークであるDjangoを使って、Webアプリを開発しようと思います。
今回作ろうと考えているのは、自分が大好きなマインスイーパーを作ろうかなと考えています。
(マインスイーパーを作るのに、Djangoは向かないだろっ!っていうツッコミはご遠慮ください笑)
それでは、始めたいと思います。
まず、仮想環境の構築を始めます。
なぜ仮想環境を構築するのか
自分も最初、仮想環境を構築する必要があると言われた時になぜなのか疑問に思いました。
調べてみると以下の理由があるようです。
- Pythonのバージョンを固定させる
- パッケージのバージョンを固定させる
なるほど。
Pythonを使っていると、上記の理由で悩まされることがあるので
仮想化の必要性を理解できますね!
準備
以下のコマンドを入力して、インストールしていきます。
# pip install virtualenv virtualenvwrapper
virtualenvが仮想環境を構築するパッケージで
virtualenvwrapperは仮想環境の管理を容易にするパッケージです!
次に、環境変数を設定するファイルであるファイルを設定します。
ファイル内に以下を追加します。
export WORKON_HOME=$HOME/.virtualenvs source /usr/local/bin/virtualenvwrapper.sh
そして、編集したファイルを反映させます。
source ~/.bash_profile
仮想環境の構築
それでは、実際に仮想環境を構築します。
# mkvirtualenv --no-site-package virtualenv
仮想環境の起動
# workon virtualenv
他にも以下のような方法があります。
# cd virtualenv # source bin/activate
workonコマンドだと、どこのディレクトリにいても起動できるので
こっちの方が便利です。
仮想環境の無効化
# deactivate
【MySQL】コマンドでDBをインポートする
おひさしぶりです.
だいぶ,久しぶりのブログです.
みなさん,phpMyAdminでDBをインポートしようとするとき,
「インポートするデータを受信できませんでした。ファイル名が送信されていないか、ファイルサイズが PHP の設定で許可された最大値を超えています。FAQ 1.16 をご覧ください。」
って表示されません?
これが,表示されてPHPの設定ファイルを変更するのは面倒ですよねー
なので,今回はphpMyAdminからDBをインポートするのではなく,
コマンドからDBをインポートしたいと思います.
mysql -u root -p < xxxxx.sql
ハイ,たったこれだけ!
簡単にサーバにファイル転送
こんにちは。
普段よくサーバやRaspberry Piをいじってて、
リモートマシンにファイルを転送したいということが多々あります。
今までは、Filezillaなどのファイル転送ソフトを使わずに
sftpコマンドを使ってリモートマシンにファイルを転送してました。
しかし、いちいち「lcd」や「cd」で移動するの面倒くさいんですよね!
なおかつ、Tabキーで入力補完されないし…
ってことで、簡単にリモートマシンにファイルをコピーすることができる【scp】というコマンドが
あるそうなので、使い方をメモしたいと思います。
ローカルからリモートにファイルをコピー
# scp ローカルのファイルパス ユーザ名@リモートのホスト名:転送先パス
(例)
# scp test.txt root@xxx.xxx.xxx.xxx:/var/www/html
リモートからローカルにファイルをコピー
# scp ユーザ名@リモートのホスト名:リモートのファイルパス ローカルの転送先
(例)
# scp root@xxx.xxx.xxx.xxx:/var/www/html/test.txt .
オプション
管理者必見! ネットワーク・コマンド集 - scpコマンド:ITpro
Tabキーで入力補完をされることはありませんが、
これでsftpコマンドより何倍も簡単にファイルを転送することができます!
エイリアスを使って、面倒なコマンドを短縮化
どうも。
だいたい1週間ぶりのブログです。
みなさん
コマンドラインで作業してると、
Tabキーで入力補完がされるといえでも、
無駄に冗長なコマンドを打つのは面倒くさくないですか?
なので、エイリアスを使って面倒なコマンドを短縮化したいと思います。
今回は、「mecab -d /usr/local/lib/mecab/dic/mecab-ipadic-neologd/」
というコマンドを「mecab-ipadic-neologd」と打つだけでできるようにしたいと思います。
エイリアスに追加
# alias mecab-ipadic-neologd='mecab -d /usr/local/lib/mecab/dic/mecab-ipadic-neologd/'
JavaScriptを使って自動スクロール
どうも。
3週間ぶりぐらいのブログです。
現在、Node.jsを使ってチャットを制作しています!
元々は、講義の課題だったんですが、色々と機能を拡張中です。
見た目は、完全にL○NEです(笑)
自分は、サーバサイドを担当するのが好きで
フロント側はあまりやったことがないので、L○NEもどきのUIにするのに苦戦しました…
で、現状の仕様だと
メッセージがサーバから送られてくると、下にどんどん追加される形です。
その場合だと入力/受信したら、わざわざ一番下までスクロールする必要があります。
なので、メッセージを追加されたら、自動的に最新のメッセージまでスクロールする仕様に変更したいと思います。
仕様
まず、それぞれのメッセージに対して動的にid(msg_id)を付与させます。
そして、メッセージが追加されたら、一番新しいIDの位置にスクロールしたいと思います。
jQuery
まず、メッセージにidが付与されていることを前提に話を進めたいと思います。
無難にjQueryを使って、付与したメッセージの絶対位置を求めたいと思います。
var positionY = $("#" + msg_id).offset().top;
正しく位置情報が取得できてるっぽいので、この値の位置に移動したいと思います。
$("#___id___").scrollTop(positionY);
おぉー、これで移動ができます。
しかし、なぜか18個目以降のメッセージになるとスクロール位置がおかしくなります…!
よくよく調べてみると、絶対位置の値がおかしくなっています。
ググッてみると、jQueryのoffsetを用いると、値がバグるとか…
なので、jQueryを使わないでいこうと思います。
ネイティブJavaScript
次に、生のJavaScriptで試してみたいと思います。
var element = document.getElementById("msg_id"); var rect = element.getBoundingClientRect(); var positionY = rect.top; element.scrollTo(0, positionY);
しかし、同様に18個目以降のメッセージで位置がおかしくなっています…
次に、getBoundingClientRectではなく、offsetTopで位置を求めてみたいと思います。
var element = document.getElementById("msg_id"); var positionY = element.offsetTop; // 変更点 element.scrollTo(0, positionY);
おぉぉぉ、うまく行っています!
これで一件落着です。
最近、JavaScript/Node.jsを勉強していますが、
JavaScriptはデバックしづらいので、好きじゃないですね…