新手上路系列(1) - 打造你的Rails on Win10開發環境

新手上路系列

Image027.png

目標

環境建置對於新手相對困難，但希望新手還是能夠至少做一次環境的建置，了解大致的步驟，畢竟環境是必要的，如果進行的不是這麼順利，請不要灰心，可以請教有經驗的老手。

以下是本次教學的重點：

  1. 安裝Ubuntu on Windows
  2. 安裝cmder及其佈景設定
  3. 安裝Rails相關套件
  4. 安裝vscode編輯器
  5. 成功執行Rails

安裝 Ubuntu on Windows

  1. 首先你要到設定中，「更新與安全性」裡頭的「開發人員專用」下面，打開「開發人員模式。」
    Image 004.png
  2. 再到「控制台」中的「程式和功能」，點選「開啟或關閉Windows功能」，裡頭有一個「適用於Linux的Windows子系統」項目將它打勾。
    Image 006.png
  3. 啟動之後要等一下安裝必要的工具，裝好後需要重新啟動。
  4. 打開Windows命令列， 輸入bash，再輸入Y，等待安裝完成即可。(最後要輸入使用者帳戶及密碼)
    Image 003.png
  5. 安裝完成後，即可看到bash程式(【開始】>【Windows 上 ubuntu 的 bash】)

安裝 zsh

  1. 直接按【開始】>【Windows 上 ubuntu 的 bash】 來安裝

  2. 輸入安裝指令

    1
    $ sudo apt-get install zsh -y

  3. 進行初次設定，請輸入zsh再按”2”來建立預設的環境

    1
    $ zsh

  4. 設定預設啟動zsh

    1
    $ nano .bashrc

    於最上方加入這幾行程式碼

    1
    2
    3
    4
    # Launch Zsh
    if [ -t 1 ]; then
    exec zsh
    fi

加完後按下 Ctrl+O 並enter存檔，再按下 Ctrl+X 離開
如此一來當你再次開啟ubuntu bash就會預設使用zsh了
但此時請先把目前的視窗縮小備用，另外開啟來測試
(避免設定失敗打不開新視窗，保留一個可以使用的視窗)

安裝 oh-my-zsh

1
2
3
4
$ sudo apt install git
$ git clone git://github.com/robbyrussell/oh-my-zsh.git ~/.oh-my-zsh
$ cp ~/.zshrc ~/.zshrc.orig
$ cp ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshrc

設定顯示名稱及修改主題

1
$ nano  ~/.zshrc
~/.zshrc
1
2
DEFAULT_USER="ANX"  #最上方輸入自定義的顯示名稱(請將ANX改成你的名字)
ZSH_THEME="agnoster" #找到ZSH_THEME把佈景改為agnoster

調整佈景的顯示(顯示自定義名稱、Rails版本號、特殊符號等)顯示

1
$ vim ~/.oh-my-zsh/themes/agnoster.zsh-theme

在命令模式下，移至首行按dG刪除全文
再將以下內容複製，於插入模式貼上
agnoster.zsh-theme
最後於命令模式按下 :wq 存檔並離開

安裝 cmder

因為原生的cmd實在很醜，這邊使用cmder來作為我們開發用的console，調整後的cmder幾乎和我mac的iterm2長得一樣

  1. 至 http://cmder.net/ 下載最新版本cmder (簡單版即可)
  2. 直接解壓縮至D:\cmder，並執行cmder.exe
  3. 建立開啟bash的路徑
    須設定預設使用bash程式，才會在ubuntu環境中
    因此我們建立一個bash::ubuntu(名稱可以自己取)，並輸入他的開啟位置及參數
    1
    %windir%\system32\bash.exe ~ -c zsh -cur_console:p

Image 022.png

  1. 設定預設以bash::ubuntu開啟
    Image 023.png

  2. 另外需要再安裝powerline專用字型，才能正確顯示一些圖示
    PowerLine Fonts
    挑一個下載並安裝字型(在window安裝)
    並在設定中指定此字型
    Image 026.png

    成品長這樣
    Image 031.png

安裝 rails 相關套件

1
$ sudo apt-get install -y build-essential git-core bison openssl libreadline6-dev curl zlib1g zlib1g-dev libssl-dev libyaml-dev libsqlite3-0 libsqlite3-dev sqlite3  autoconf libc6-dev libpcre3-dev curl libcurl4-nss-dev libxml2-dev libxslt-dev imagemagick nodejs libffi-dev
1
$ sudo \curl -sSL https://get.rvm.io | bash;source ~/.rvm/scripts/rvm;rvm install 2.4.1;
1
$ gem install rails -v '5.1.1' -V --no-ri --no-rdoc;gem install bundler -V --no-ri --no-rdoc;

安裝 mysql

請將123456替換為自己的密碼(有兩個123456)

1
$ sudo debconf-set-selections <<< 'mysql-server mysql-server/root_password password 123456';sudo debconf-set-selections <<< 'mysql-server mysql-server/root_password_again password 123456';sudo apt-get -y install mysql-server mysql-common mysql-client libmysqlclient-dev;

安裝 nginx

1
$ sudo apt-get -y install nginx;

安裝 git

剛剛在安裝rails已經將git一併安裝進ubuntu中囉
如果你需要使用圖形化的git軟體如SourceTree，則需要在windows再裝一次git
git下載
SourceTree下載

安裝編輯器( vscode / sublime / atom)

請選擇一款喜歡的安裝，推薦vscode

vscode
https://code.visualstudio.com/
目前討論度最高的編輯器，由微軟開發的免費開源軟體，整合git、console，外掛安裝方便，開啟速度也算快。

atom
https://atom.io/
使用electron開發的編輯器，免費開源軟體，安裝後不太需要設定，支援外掛都很多，但開啟速度較令人詬病。

sublime
https://www.sublimetext.com/
算是近幾年來開發人員的首選，付費軟體，免費會有煩人的提示訊息。不過已經很久未更新。
安裝後需要做很多設定才能使用，適合不想跳槽的老手，新手不要嘗試了。

使用方式

這邊要提醒一件事情
因為ubuntu無法直接呼叫windows的exe檔案
所以無法使用console直接開啟編輯器，需要直接從資料夾開啟

又因為ubuntu他的目錄隱藏，唯一和windows可以連結的部分就是他有mount到c及d槽，
所以我們建立一個 D:/projects/ 資料夾，把專案都建在這裡比較方便開啟
不過這樣每次開啟console都要再輸入cd /mnt/d/projects/很麻煩，於是進到zshrc設定檔

1
$ nano ~/.zshrc

在最後一行補上預設路徑

1
cd  /mnt/d/projects/

如此一來，開發時只要開啟cmder就可以進入工作目錄
另外再開啟編輯器、瀏覽器即可

如果重開cmder無法執行rails或ruby指令，請至

1
$ nano ~/.zshrc

到最後一行補上

1
source ~/.rvm/scripts/rvm

建立 rails 專案

依照平常建立方式即可

1
$ rails new myApp

假設有問題，請改用這個試試

1
$ rails new myApp --skip-spring --skip-listen

參考

  1. Running windows ubuntu bash in cmder
  2. Rails Install
  3. Rails Install
  4. Zsh Install
  5. Uninstall Ubuntu Bash
  6. Oh-my-Zsh
  7. PowerLine Fonts
  8. Fix Windows 10 Ubuntu Bash
RailsWin10