2017/12/28

第九天:作一個最簡單的 Rails 網站( 2018 iT邦幫忙鐵人賽-只要有心,人人都可以作卡米狗 )

markdown 我們今天終於可以開始作網站了,首先我們要找一個地方放我們網站的程式碼。 # 建立一個 Rails 網站 先開啟檔案總管(`Windows`+`E`),移動到 `D:\只要有心,人人都可以作卡米狗` 這個資料夾下。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcqnKOf31yBORJ-WAI6uRr4EgSdl25jDCI8XCfTspuOPG9oiLNOfNlGPHAZTS8Ylr32FL3vwuDWJbkOlbbjeexvy-7wMr8-_gUnGGbQUIIfd0VRXwvykJlKs97dnldhDb77ArBVuCYjcI/s1600/1.jpg) 然後在網址列輸入 `cmd` 開啟小黑框。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-wl6A0Wv3LOF0mvp2f4tB7U6SW7byAFhyphenhyphenzfvXPMTY3hc-AHSw2d-aIuCWzWyB79yTvEVMRUT9Pz6dhPJhY3y2AJ9JaBw_UHT2t0DADF3JrvGfdR8wijoW9N_Anv5GuR14xjbxa1JTRME/s1600/2.jpg) 我們要在這個資料夾建立一個名叫 `ironman` 的網站。 在小黑框輸入 `rails new ironman`。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg66nI2YFbfoy1mQAnT07BZ2wAYPDkUy9UfTRrczFnwcEWbb9HSDdEvGG-U1DjbH9ilP_anWtR7R-47xjU4alee1Hzx7yNONDviSQG6i64GhQYHA6kEgn3cxP7XOHN4KBc-OeQQlw9b0ng/s1600/3.jpg) 然後按下 `Enter`。 ``` D:\只要有心,人人都可以作卡米狗>rails new ironman create create README.md create Rakefile create config.ru create .gitignore create Gemfile run git init from "." Initialized empty Git repository in D:/只要有心,人人都可以作卡米狗/ironman/.git/ create app create app/assets/config/manifest.js create app/assets/javascripts/application.js create app/assets/javascripts/cable.js create app/assets/stylesheets/application.css create app/channels/application_cable/channel.rb create app/channels/application_cable/connection.rb create app/controllers/application_controller.rb create app/helpers/application_helper.rb create app/jobs/application_job.rb create app/mailers/application_mailer.rb create app/models/application_record.rb create app/views/layouts/application.html.erb create app/views/layouts/mailer.html.erb create app/views/layouts/mailer.text.erb create app/assets/images/.keep create app/assets/javascripts/channels create app/assets/javascripts/channels/.keep create app/controllers/concerns/.keep create app/models/concerns/.keep create bin create bin/bundle create bin/rails create bin/rake create bin/setup create bin/update create bin/yarn create config create config/routes.rb create config/application.rb create config/environment.rb create config/secrets.yml create config/cable.yml create config/puma.rb create config/environments create config/environments/development.rb create config/environments/production.rb create config/environments/test.rb create config/initializers create config/initializers/application_controller_renderer.rb create config/initializers/assets.rb create config/initializers/backtrace_silencers.rb create config/initializers/cookies_serializer.rb create config/initializers/cors.rb create config/initializers/filter_parameter_logging.rb create config/initializers/inflections.rb create config/initializers/mime_types.rb create config/initializers/new_framework_defaults_5_1.rb create config/initializers/wrap_parameters.rb create config/locales create config/locales/en.yml create config/boot.rb create config/database.yml create db create db/seeds.rb create lib create lib/tasks create lib/tasks/.keep create lib/assets create lib/assets/.keep create log create log/.keep create public create public/404.html create public/422.html create public/500.html create public/apple-touch-icon-precomposed.png create public/apple-touch-icon.png create public/favicon.ico create public/robots.txt create test/fixtures create test/fixtures/.keep create test/fixtures/files create test/fixtures/files/.keep create test/controllers create test/controllers/.keep create test/mailers create test/mailers/.keep create test/models create test/models/.keep create test/helpers create test/helpers/.keep create test/integration create test/integration/.keep create test/test_helper.rb create test/system create test/system/.keep create test/application_system_test_case.rb create tmp create tmp/.keep create tmp/cache create tmp/cache/assets create vendor create vendor/.keep create package.json remove config/initializers/cors.rb remove config/initializers/new_framework_defaults_5_1.rb run bundle install Fetching gem metadata from https://rubygems.org/........... Fetching gem metadata from https://rubygems.org/.. Resolving dependencies..... Using rake 12.3.0 Using concurrent-ruby 1.0.5 Using i18n 0.9.1 Using minitest 5.10.3 Using thread_safe 0.3.6 Using tzinfo 1.2.4 Using activesupport 5.1.4 Using builder 3.2.3 Using erubi 1.7.0 Using mini_portile2 2.3.0 Using nokogiri 1.8.1 (x64-mingw32) Using rails-dom-testing 2.0.3 Using crass 1.0.3 Using loofah 2.1.1 Using rails-html-sanitizer 1.0.3 Using actionview 5.1.4 Using rack 2.0.3 Using rack-test 0.8.2 Using actionpack 5.1.4 Using nio4r 2.2.0 Using websocket-extensions 0.1.3 Using websocket-driver 0.6.5 Using actioncable 5.1.4 Using globalid 0.4.1 Using activejob 5.1.4 Using mini_mime 1.0.0 Using mail 2.7.0 Using actionmailer 5.1.4 Using activemodel 5.1.4 Using arel 8.0.0 Using activerecord 5.1.4 Using public_suffix 3.0.1 Using addressable 2.5.2 Using bindex 0.5.0 Using bundler 1.16.0 Using byebug 9.1.0 Using xpath 2.1.0 Using capybara 2.16.1 Using ffi 1.9.18 (x64-mingw32) Using childprocess 0.8.0 Using coffee-script-source 1.12.2 Using execjs 2.7.0 Using coffee-script 2.4.1 Using method_source 0.9.0 Using thor 0.20.0 Using railties 5.1.4 Using coffee-rails 4.2.2 Using multi_json 1.12.2 Using jbuilder 2.7.0 Using puma 3.11.0 Using sprockets 3.7.1 Using sprockets-rails 3.2.1 Using rails 5.1.4 Using rb-fsevent 0.10.2 Using rb-inotify 0.9.10 Using rubyzip 1.2.1 Using sass-listen 4.0.0 Using sass 3.5.4 Using tilt 2.0.8 Using sass-rails 5.0.7 Using selenium-webdriver 3.8.0 Using sqlite3 1.3.13 (x64-mingw32) Using turbolinks-source 5.0.3 Using turbolinks 5.0.1 Using tzinfo-data 1.2017.3 Using uglifier 4.0.2 Using web-console 3.5.1 Bundle complete! 13 Gemfile dependencies, 67 gems now installed. Use `bundle info [gemname]` to see where a bundled gem is installed. D:\只要有心,人人都可以作卡米狗> ``` 這邊可以先不用細讀,如果看到跟我的很像的話就是順利,不順利的人可以截圖在本文留言。 一個最簡單的網站就這樣作好了! # 看看建立的網站 先用 `dir /w` ,可以看到多了一個資料夾叫作 `ironman`。 ``` D:\只要有心,人人都可以作卡米狗>dir /w 磁碟區 D 中的磁碟是 GG 磁碟區序號: D403-9A5D D:\只要有心,人人都可以作卡米狗 的目錄 [.] [..] [ironman] 新文字文件.html 1 個檔案 37 位元組 3 個目錄 1,590,464,393,216 位元組可用 D:\只要有心,人人都可以作卡米狗> ``` 再用 `cd ironman` 移動到專案資料夾目錄下。 ``` D:\只要有心,人人都可以作卡米狗>cd ironman D:\只要有心,人人都可以作卡米狗\ironman> ``` 再用 `dir /w` 看資料夾內容。 ``` D:\只要有心,人人都可以作卡米狗\ironman>dir /w 磁碟區 D 中的磁碟是 GG 磁碟區序號: D403-9A5D D:\只要有心,人人都可以作卡米狗\ironman 的目錄 [.] [..] .gitignore [app] [bin] [config] config.ru [db] Gemfile Gemfile.lock [lib] [log] package.json [public] Rakefile README.md [test] [tmp] [vendor] 7 個檔案 7,601 位元組 12 個目錄 1,590,464,393,216 位元組可用 D:\只要有心,人人都可以作卡米狗\ironman> ``` 這就是剛剛的 `rails new ironman` 幫我們建立的檔案們。他自動生成了一個 rails 專案所需要的檔案,以及安裝相關的套件。好消息是這麼多資料夾和檔案,現階段我們都不需要認識。 # 執行網頁伺服器 我們直接用 `rails server` 執行網站伺服器。(注意:rails server 必須在專案資料夾執行才有效) ``` D:\只要有心,人人都可以作卡米狗\ironman>rails server => Booting Puma => Rails 5.1.4 application starting in development => Run `rails server -h` for more startup options *** SIGUSR2 not implemented, signal based restart unavailable! *** SIGUSR1 not implemented, signal based restart unavailable! *** SIGHUP not implemented, signal based logs reopening unavailable! Puma starting in single mode... * Version 3.11.0 (ruby 2.4.2-p198), codename: Love Song * Min threads: 5, max threads: 5 * Environment: development * Listening on tcp://0.0.0.0:3000 Use Ctrl-C to stop ``` 看到第一行 `Booting Puma` 這就是我之前說的 Puma 網頁伺服器。再看到最後面有一行 `Listening on tcp://0.0.0.0:3000` 是重點,看到這行表示 server 已經在運作了。 # 用瀏覽器連網頁伺服器 這時候你開啟這個網址:[http://127.0.0.1:3000](http://127.0.0.1:3000) 或者這個網址:[http://localhost:3000/](http://localhost:3000/) 就會看到你的網站。 網站長這樣: ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkubR4hgKhfF_ksU69jzG4VmJM50gNxLUd0V6A_PXM0xDBH8Nd0DnbJVHMGvD_CRAMg7-vspZA19gmG7EhbuCjyiMEA-r5mKp-TpuvVvaarW3alGuWS4qFS-7S9PtcNFAy72QymD4YbFk/s1600/4.jpg) 我可沒有要給你看我的初音主題哦。 回去看看小黑框,上面多了一些字像這樣: ``` Started GET "/" for 127.0.0.1 at 2017-12-28 01:57:53 +0800 Processing by Rails::WelcomeController#index as HTML Rendering C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/railties-5.1.4/lib/rails/templates/rails/welcome/index.html.erb Rendered C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/railties-5.1.4/lib/rails/templates/rails/welcome/index.html.erb (2.5ms) Completed 200 OK in 65ms (Views: 29.9ms) ``` 每當你開啟一次 [http://localhost:3000/](http://localhost:3000/),你就會看到多了一些字在小黑框上,這代表有人正在下載我們的網頁檔案。 # 網頁伺服器運作過程 這裡我們仔細讀一下看他寫些什麼,只有五行不難讀。 ``` Started GET "/" for 127.0.0.1 at 2017-12-28 01:57:53 +0800 ``` 這表示有客人在瀏覽器輸入了 [http://localhost:3000/](http://localhost:3000/) 透過網路連線過來了,他來我們拿一個檔案。 ``` Processing by Rails::WelcomeController#index as HTML ``` 我們這邊的服務生是由 `Rails::WelcomeController#index` 來作服務。 ``` Rendering C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/railties-5.1.4/lib/rails/templates/rails/welcome/index.html.erb ``` 服務生決定拿 `C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/railties-5.1.4/lib/rails/templates/rails/welcome/index.html.erb` 這個檔案的執行結果給客戶。 # 把網頁搞爆 為了證明這是你的網站,我們要修改一個檔案,來影響這個網站的畫面。 我們開一個新的檔案總管(`Windows`+`E`),並在網址列輸入`C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/railties-5.1.4/lib/rails/templates/rails/welcome/` (注意:你的路徑可能跟我的不同)。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiejoBNl76guft6PO4ghF5gH8OD7ys4KyS4btcqVdv29sPi2aGQO1j9P-A2lOHX3CgZ6iEs2DTsAAL9la7xPIldrhgVD-0D46Rd1QqSp2c_U9y7M9Er9sCOGlz-ra4dxj-hNj8vuve7c74/s1600/5.jpg) 嗯...為了避免初心者幼小的心靈遭受到巨大的打擊,我們千萬不要打開這個檔案。 我們先備份一下這個檔案,備份檔案的方式是新增一個資料夾叫`備份`。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVqD4bG9tujXgiCVkq6WubPbEblZkzqlz_SEaGu_etyP750_UVwlOune67_pPWPbkHa5dE_MJl5u9eoJe8Uo5goUFEGt0Ij_CLs3U8b8WLEJgiFOx8BiQOzeV-p6Axy97HAyazVYIVk2E/s1600/8.jpg) 然後把現在的這個 `index.html.erb` 用滑鼠拖曳的方式丟進`備份`資料夾裡。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjGWJYrYuzeKCzTglcaSooOkKQ3Chzp5rpX9THm1Ll6AZckaR-gi5EC_sxOnhGivWvv_xph6GTjb4b5wSyYHDt55ko_fN22F7SvhZ9b8MgYQUnpfcj8Mq8FTbHAzFmvVVjsxmouxKvDBM/s1600/9.jpg) 丟進去之後這裡就沒有 index.html.erb 這個檔案了。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3ocFhQYlvSmRb4Ue4LOnx-TDtORhph_kyjyaYXvhiTvep-DYktDEQoFIeZNCkQrzpFthbkj8hzjCb9ef43O4JvXjt0fwFcknEGjLcap8bff4BvSgMdg69IdFtq_K9zKhxIRaioCOoaAU/s1600/10.jpg) 這時候我們再開一次網頁 [http://localhost:3000/](http://localhost:3000/)。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLPqrHpjFJWp8Vo7mhBiQzzHjpABDbx2cq0IcllxEIW3d-QfQxjOCl8XaGRXliZu9JcdaWcAf2ScpvgOKSICTH1KezeIoaixUJ_2tzxleg4Hi8L0MM9m8MYv9A2nrJuvNeEOAcIljThjQ/s1600/11.png) 恭喜你獲得了 `第一次把網站搞爆就上手` 的成就。 因為他找不到 `index.html.erb` 這個檔案,所以就◢▆▅▄▃_崩╰(〒皿〒)╯潰_▃▄▅▆◣惹。 其實到這邊就已經證明了,[http://localhost:3000/](http://localhost:3000/) 這個網站真的是在我們的電腦上。 # 把網頁修好 這時我們要把他修好,我們在[第六天:認識網站](https://ithelp.ithome.com.tw/articles/10193664)有學過怎麼作網頁。 我們在這裡新增一個文字檔,並直接改名叫 `index.html`,再次開啟 [http://localhost:3000/](http://localhost:3000/)。 就會看到一個空白畫面。耶,我們把網站修好了。 # 關閉網頁伺服器 我們回到小黑框,按下 `Ctrl`+`C`。 ``` - Gracefully stopping, waiting for requests to finish === puma shutdown: 2017-12-28 02:48:28 +0800 === - Goodbye! Exiting 要終止批次工作嗎 (Y/N)? ``` 這邊輸入`Y`,`Enter`,網頁伺服器就被關掉了,這時候再去開網頁會看到什麼呢? [http://localhost:3000/](http://localhost:3000/) 。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhozOvJwSY5wEcg8F6W8vrqTiJaeHXJY3GmVpKsoq7kdCgH-BhPZ53ZzRx5aL_Ek_iyn0zu77m-GAvlZrvNh2T5o7AmMAGoevVxHnlSXklyaIFhwKbGCWeuX5BcixLaYdK2pRqJYXnngz0/s1600/14.jpg) # 結論 - 今天學會了怎麼作一個最簡單的 Rails 網站 - 今天學會執行和關閉網頁伺服器 - 還不知道為什麼 [http://localhost:3000/](http://localhost:3000/) 可以連到網站 - 還不知道為什麼在自己作的網站打中文,網站就會掛掉 如果你有偷偷研究,你會發現在我們作的網頁裡面放英文沒事,但放中文就會壞掉,明天講怎麼解決這個問題。

沒有留言: