建立簡單的ES6+React+webpack 3開發環境

在大約1年前，我分享過一篇關於"利用webpack+babel建立簡單的ES6(ES2015)+React開發環境"的文章。

由於最近出了webpack 3，以及包括node，REACT在內的各樣更新。那篇文章恐怕已經過時了。此外，最近開始準備利用REACT開發新的項目，所以，我順便在這裡分享一下建立一個簡單的ES6+React+webpack 3開發環境。


Github地址為:
https://github.com/crongjie/simple_react_webpack3_environment



詳細步驟如下:

1. 首先, 需要下載和安裝Node.js (https://nodejs.org/)

我這篇文章所運用的開發環境的版本如下:
------------------------
node v6.11.1 LTS
npm v3.10.10
------------------------

2. 建立一個新文件夾用作存放文件,在這個例子裡面,我使用的文件夾是 /simple_react_webpack3_environment/

3. 輸入以下指令建立 package.json

npm init

在裡面隨便輸入一些內容, 如下:

[Raspberry Pi] 在Raspbian上安裝GitLab CE

由於個人開發用了svn好一段時間；另外，因為近期的工作上,都在用git....而且慢慢開始習慣了用git進行版本控制。所以，個人考慮在自家的服務器上裝上git的服務器，來給自己的新項目進行版本控制。
所以，我考慮在自家的Rabpberry Pi上，裝上GitLab。



這篇文章主要的參考內容為:
https://about.gitlab.com/downloads/#raspberrypi2


安裝方法如下：

Step #1：
首先執行以下指令， 更新Rabpberry Pi。

apt-get update
apt-get upgrade

Step #2：
然後，安裝需要的東西。

sudo apt-get install curl openssh-server ca-certificates postfix apt-transport-https
curl https://packages.gitlab.com/gpg.key | sudo apt-key add -

Step #3：
輸入以下指令，開始安裝GitLab:

sudo curl -sS https://packages.gitlab.com/install/repositories/gitlab/raspberry-pi2/script.deb.sh | sudo bash
sudo apt-get install gitlab-ce

安裝需要下載300多MB的內容，而且還額外需要多860MB， 對空間的需求也頗大。

安裝完畢後，會出現以上畫面。

Step #4：
然後，需要編輯檔案 /etc/gitlab/gitlab.rb

預設的話, external_url 的內容為 'http://raspberrypi'

由於HTTP服務器方面,我的Raspberry Pi已用上其他web server方面的服務，所以我在 /etc/gitlab/gitlab.rb 輸入以下內容，把我的GitLab Server設置到 Port 8081, 例子如下:

external_url 'http://IP地址:8081'
unicorn['listen'] = '127.0.0.1'
unicorn['port'] = 10087
nginx['listen_port'] = 8081

Step #5：
編輯 完畢後,輸入以下指令,重設並啟動GitLab。

sudo gitlab-ctl reconfigure

Step #6：
然後，利用 http://你的IP地址：8081  就會進入以下畫面設定管理員密碼：

Step #7：
在輸入完密碼以後，就可以利用以下賬號登入GitLab，或者另外去做一個新帳號。
ID: root
密碼： （剛才輸入的密碼）

後話：

雖然GitLab安裝容易，但可以，在Raspberry Pi裡反應太慢，而且還會因為反應慢，出現Error 502畫面。
所以，個人感覺很一般。也許需要把GitLab裝到別的服務器內，或者是因為我的Raspberry Pi已經運行了很多服務，不適合再用GitLab

建立和發布開源的npm模組

由於最近打算建立一些開源的項目來分享及交流一下，所以在這篇blog文裡，我做一做筆記，分享一下我是如何建立npm的模組，並且利用github分享出來。


參考文章：
npm官方的文件 - https://docs.npmjs.com/getting-started/publishing-npm-packages


這篇文章的Github:  https://github.com/crongjie/npm-rjn-helloworld




1. 首先，需要到以下網址，建立一個npm的賬號：
https://www.npmjs.com/signup


如果，沒有github賬號的話，也請到github裡面開一個帳號。
網址： https://github.com/join?source=header-home


2. 然後，到github給你的開源項目，建立一個新的項目：

這篇文章則建立一個名為"npm-rjn-helloworld"的開源項目作例子。

例子:
Github Repository名:  npm-rjn-helloworld
NPM 項目名: rjn-helloworld

利用webpack+babel建立簡單的ES6(ES2015)+React開發環境

關於ES6(ES2015) - ECMAScript 6, 是一種用於front-end(前端)開發,新的JavaScript語法標準.由於是一種新的語法標準的關係,並不是全部瀏覽器都支持,所以需要用babel等transpiler工具,編譯到傳統的Javasript語法.

而React(React.js)方面,可以使用JSX語法開發,這個也不是傳統的Javascript語法,也需要運用到transpiler把JSX語法轉換為傳統的Javasript語法.

所以, 這篇文章主要是分享一下我如何運用webpack+babel, 建立一個簡單的ES6 + React的開發環境.

Github地址為: https://github.com/crongjie/simple_es6_react_environment


詳細步驟如下:

1. 首先, 需要下載和安裝Node.js (https://nodejs.org/)

我這篇文章所運用的開發環境的版本如下:
------------------------
node v6.6.0
npm v3.10.3
------------------------

2. 建立一個新文件夾用作存放文件,在這個例子裡面,我使用的文件夾是 /simple_es6_react_environment/

3. 輸入以下指令建立 package.json

npm init

在裡面隨便輸入一些內容, 如下:

[Raspberry Pi] 在Raspbian上安裝svn(subversion)服務器

這篇文章主要是分享一下我如何安裝svn服務器，及進行一些配置等。

我安裝svn的配置為：

-------------------------------
型號： Raspberry Pi 2 Model B
SD卡： Kingston MicroSD HC Class 10, 32GB
OS: Raspbian Jessie Lite (Version May 2016, Kernel 4.4)
-------------------------------

安裝步驟如下：

1. 如果未安裝apache2的話，請先執行這個指令:

sudo apt-get install apache2

2. 執行以下指令安裝svn服務器

sudo apt-get install subversion libapache2-svn

[Raspberry Pi]把Redmine 2.4.2遷移及更新到Redmine 3.3.0

由於我需要把自家Ubuntu Server上的Redmine 2.4.2 遷移到 Raspbian上的Redmine 3.3.0，所以在這篇文章裡面，我會分享一下我的做法。

舊有的Redmine 環境和配置：
-------------------------------
OS: Ubuntu 14.04
Redmine版本： 3.3.0
-------------------------------

新的Redmine配置：
-------------------------------
型號： Raspberry Pi 2 Model B
SD卡： Kingston MicroSD HC Class 10, 32GB
OS: Raspbian Jessie Lite (Version May 2016, Kernel 4.4)
Redmine版本： 3.3.0
-------------------------------

關於安裝Redmine 3.3.0， 可以參考這篇文章。


步驟如下：

1. 首先用以下指令，備份原有舊版本的Redmine database：

mysqldump -u root -p redmine > redmine_backup.sql

2. 備份redmine/files 文件夾：

tar cvzf redmine_files_bak.tar.gz /var/lib/redmine/default/files

這個視乎安裝redmine的位置來決定，可能會是 /opt/redmine/files 或者 /usr/share/redmine/files


3. 把備份了的 redmine_backup.sql 和 redmine_files_bak.tar.gz 複製到目標的機器（我的情況是Raspberry Pi)。

4. 執行以下指令，恢復備份的database到新的Redmine

mysql -u root -p redmine < redmine_backup.sql

5.  恢復備份的files文件到新的Redmine

tar -xvf redmine_files_bak.tar.gz
mv var/lib/redmine/default/files/ /opt/redmine/

6. 執行以下指令更新database：

cd /opt/redmine/
rake db:migrate RAILS_ENV=production 

7. 執行以下指令清除cache 和 session，並且重啟apache2

rake tmp:cache:clear
rake tmp:sessions:clear
service apache2 restart

完成以上步驟後，就成功把Redmine 2.4.2 更新到 3.3.0了。

[Raspberry Pi] 在Raspbian上安裝Apache+MySQL+Redmine 3.3.0

這篇文章主要是參考自 Redmine 官網上的 HowTo Install Redmine on Debian 8 with Apache2-Passenger

我安裝Redmine的配置為：

-------------------------------
型號： Raspberry Pi 2 Model B
SD卡： Kingston MicroSD HC Class 10, 32GB
OS: Raspbian Jessie Lite (Version May 2016, Kernel 4.4)
Redmine版本： 3.3.0
-------------------------------

安裝步驟如下：

1. 先執行以下指令更新套件

sudo apt-get update && sudo apt-get upgrade

[Raspberry Pi] 利用root賬號ssh登入Raspbian

在前一篇文章裡面，我大概介紹了如何安裝Raspbian，以及修改pi 和 root的密碼。

由於個人需要用root賬號，給Raspbian進行各種安裝和設定。而且我也比較懶，不想經常輸入 sudo 指令。所以，我需要以root的身份，ssh登入Raspbian。
（當然，按安全性考慮的話，不建議允許root賬號ssh登入的。我只是在初期設定時，為了方便才這樣做）

但是，如果什麼都不設定的話，就會看見這個畫面：

login as: root
root@192.168.XXX.XXX's password:
Access denied

P.S.
由於我是在windows SSH登入Raspbian的，所以我使用的是PuTTY 。 PuTTY可到以下網址下載：
http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html



解決方法如下：

1. 先用別的賬號（例如 賬號pi) ssh登入Raspbian

2. 使用以下指令修改ssh server的設定：

sudo nano /etc/ssh/sshd_config

3. 找到 PermitRootLogin without-password 這一行，並且修改為以下內容：

PermitRootLogin yes

4. 按Ctrl + X 退出，並且選擇 Yes 儲存變更。

5. 用以下的指令重啟ssh server

sudo service ssh restart

6. 完成後，就可以成功用root賬號ssh登入Raspbian了

Git指令筆記

本人由於主要是用svn作Version Control. 只有一部份開源項目是用Github。 所以，經常會忘記了部份Git的指令。
因此，我在這篇 blog裡，記下幾個我比較常用的Git 指令：

1. 把Git的Repository Clone 下來

git clone {網址}

如果需要用戶登錄/密碼,指令為：

git clone http://{username}:{password}@{hostname}/{repository}.git

[Android Studio]入門筆記 Part 2 - Activity

上一篇的筆記 [Android Studio]入門筆記 Part 1介紹了基本的Android編程，例如使用Button, TextView 等。 今回的文章主要是介紹如何使用和切換Activity。

關於 Activity 的說明： http://developer.android.com/guide/components/activities.html
Activity的API: http://developer.android.com/reference/android/app/Activity.html

Activity是什麼呢？ 簡單的來說，Activity在android裡面，是提供一個畫面以及畫面內相關操作的元件。在一些比較複雜的程序裡面，通常需要用到多過一種畫面的，這種情況下，則需要多過一種Activity。

以下例子，則介紹如何寫一個多畫面的程序，以及用上多過一個Activity。

[Android Studio]入門筆記 Part 1

由於早陣子開始了使用Android Studio，由於我在也是初學者的關係，所以在一邊學習之餘，一邊做筆記，並且寫上這個blog裡面。

基本上，這篇筆記是給我自己個人使用，所以內容可能寫得沒那麼詳細。只是作為參考的話，對於一些初學者來說也許會有一點幫助。（當然，估計編程方面需要一定程度的知識，才能可能看得明我的筆記）

在Blogger中顯示程序代碼

由於最近開始寫這個Blog，而且寫的文章大部份都是一些技術文章，需要在文章裡面加上指令或者程序代碼等東西。而現在的blog (Blogger)的基本功能並沒有支持顯示程序代碼的功能，所以只能想方法修改HTML來支持顯示程序代碼。

所以我在這篇文章裡面，分享一下我如何在Blogger的文章裡面，顯示程序代碼，以及我試了哪些方法。

用以下的代碼作例子來說。

function Hello() {
    alert('Hello World!');
}

[艦これ]免VPN登入DMM netgame的方法（2016年5月更新）

作為一個海外的艦これ提督, 由於長期用直連玩,需要每個月登入一次DMM去更新1-5/2-5的bar; 另外經常會因為測試網站/ 艦これ而需要清瀏覽器的cookie.
因此,經常要重複用同一方法,去登入DMM 和 艦これ.

所以,我就把以下的方法memo下來，方便將來使用。
順便也向不認識使用這方法的朋友去介紹一下。

主要參考資料來自:

http://kancolle.wikia.com/wiki/Tutorial:_Proxy_Connection


主要使用的，是以下的一段代碼，主要是用來修改cookie，去免除DMM在netgame和艦これ裡面，對海外用戶的封鎖:

document.cookie = "cklg=welcome;expires=Sun, 09 Feb 2019 09:00:09 GMT;domain=.dmm.com;path=/";
document.cookie = "cklg=welcome;expires=Sun, 09 Feb 2019 09:00:09 GMT;domain=.dmm.com;path=/netgame/";
document.cookie = "cklg=welcome;expires=Sun, 09 Feb 2019 09:00:09 GMT;domain=.dmm.com;path=/netgame_s/";
document.cookie = "ckcy=1;expires=Sun, 09 Feb 2019 09:00:09 GMT;domain=.dmm.com;path=/";
document.cookie = "ckcy=1;expires=Sun, 09 Feb 2019 09:00:09 GMT;domain=.dmm.com;path=/netgame/";
document.cookie = "ckcy=1;expires=Sun, 09 Feb 2019 09:00:09 GMT;domain=.dmm.com;path=/netgame_s/";

[Softether VPN] 連接VPN網絡後不能訪問VPN服務器的各種問題與解決方法

最近我在給自家新架設的Linux服務器 上安裝Softether VPN時，發現以下的一個問題。

我在外面連接自家的Softether VPN 服務器時，在連接到自己的VPN網絡後，我發覺不能SSH去自己的VPN服務器；而VPN網絡中的其他機器，則能夠連接。

例如：
在我家的電腦裡面， 內聯網（VPN網絡）的架構是這樣的：

VPN服務器： 192.168.1.100
電腦1： 192.168.1.101
電腦2： 192.168.1.102
外部IP： 123.123.123.123

當我在外面的網絡,透過外部IP(123.123.123.123) 連接進自家的VPN網絡後， 發覺不能ping 或者 SSH去自己的VPN服務器 （192.168.1.100），反之，連接其他電腦，例如192.168.1.101 ， 192.168.1.102 則沒有問題。

在Genymotion安裝Google Play Service

Genymotion 是一款Android模擬器, 主要是給windows/linux/Mac的用家,透過Virtual box, 運行Android, 對於我個人來說,最大的優點是速度很快,尤其是和 google的android SDK (Android Studio)附帶的模擬器相比, Genymotion運行的速度快很多,而且配合eclipse進行android程序的開發和調試也非常方便.

網址: https://www.genymotion.com/
用這款模擬器的話,需要Virtual Box, 可以到這裡下載:
https://www.virtualbox.org/

安裝方法可以看官網的教學: https://www.genymotion.com/#!/developers/user-guide