ในโพสต์นี้เราจะสร้างเว็บไซต์ส่วนตัวโดยใช้รางและปรับใช้กับ Heroku Heroku เป็นแพลตฟอร์มแอปพลิเคชันระบบคลาวด์ซึ่งเป็นวิธีใหม่ในการสร้างและปรับใช้เว็บแอป สิ่งที่ดีที่สุดเกี่ยวกับ Heroku คือคุณไม่ต้องเสียเงินสำหรับการโฮสต์เว็บแอปพื้นฐานเนื่องจาก Heroku จัดหมวดหมู่ให้เป็นแบบฟรี เราจะสร้างแอปพลิเคชั่นรางหน้าเดียวและจะเป็นเว็บไซต์แบบคงที่ที่สามารถใช้เป็นผลงานได้
ด้านล่างนี้เป็นภาพรวมของแอปพลิเคชันราง (ติดตั้งบน Heroku ที่นี่ )
มาเริ่มสร้างแอปพลิเคชัน Rails นี้กัน ฉันถือว่าคุณได้ติดตั้ง Ruby และ Rails แล้ว ตรวจสอบให้แน่ใจว่าคุณมี Ruby 2.0 และ Rails 4.2.2 คุณสามารถตรวจสอบเวอร์ชันจากพรอมต์คำสั่ง
หมายเหตุ: เราจะใช้ Ruby 2.0 และ Rails 4.2.2 หากคุณมี Ruby และ Rails เวอร์ชันต่างๆบางขั้นตอนที่แสดงในโพสต์นี้อาจไม่ได้ผลสำหรับคุณ
การสร้างโครงการ:
เราจะตั้งชื่อโครงการของเราว่าเว็บไซต์ ในการสร้างโครงการให้ใช้คำสั่ง Rails เว็บไซต์ใหม่
Rails จะสร้างไฟล์ทั้งหมดโดยอัตโนมัติและจะติดตั้งอัญมณีที่จำเป็นทั้งหมดด้วยการรันบันเดิลรันที่ติดตั้งโดยอัตโนมัติดังที่แสดงด้านล่าง
ตอนนี้คุณจะเห็นโฟลเดอร์เว็บไซต์ภายใต้ไดรฟ์ C: ของคุณ (ตำแหน่งที่เราเรียกใช้คำสั่งเว็บไซต์ใหม่ของ Rails) มาเปิดโฟลเดอร์เว็บไซต์ใน IDE กัน ฉันมี Brackets IDE จาก Adobe คุณสามารถใช้อย่างอื่นได้ตามที่ไม่สำคัญ
โครงสร้างโครงการ:
โครงสร้างโครงการที่สร้างขึ้นจะมีลักษณะดังนี้
แม้ว่าเราจะไม่ได้เขียนโค้ดใด ๆ แต่คุณก็สามารถเรียกใช้แอปพลิเคชันเว็บไซต์ได้ในขณะนี้ ในการเรียกใช้แอปพลิเคชันเว็บไซต์ให้รันคำสั่ง Rails จากโฟลเดอร์เว็บไซต์ดังที่แสดงด้านล่าง
ดังที่คุณเห็นในภาพรวมด้านบนว่าแอปเว็บไซต์ของเราได้รับการปรับใช้ที่http: // localhost: 3000
คุณจะสามารถเห็นหน้าจอด้านล่างในการเข้าถึง URLhttp: // localhost: 3000
แต่เราต้องการแสดงหน้าหลักของแอปพลิเคชันในการเข้าถึง URLhttp: // localhost: 3000 /.ในการสร้างเพจ index.html ภายใต้โฟลเดอร์สาธารณะของโครงการเว็บไซต์ของเรา
หมายเหตุ: Rails จะแสดงหน้า index.html โดยอัตโนมัติในการเข้าถึงรูท URLhttp: // localhost: 3000
ในขณะนี้เรามีเพียงบรรทัดเดียวในหน้า index.html
ไปที่ URL รากhttp: // localhost: 3000
ตอนนี้เรามาเติมชีวิตชีวาให้กับหน้า index.html ของเราด้วยการเพิ่มรูปภาพ - JS และ CSS สุดเจ๋ง เราจะใช้ธีมสีเทาตั้งแต่เริ่มบูตสแตรป
Grayscale Start Bootstrap Theme -
วิธีการเพิ่ม double เป็น int ใน java
ด้านล่างนี้คือภาพรวมของธีม bootstrap เริ่มต้นระดับสีเทาที่เราจะใช้ เราจะปรับแต่งธีมนี้ให้ตรงตามความต้องการของเรา
คุณสามารถดาวน์โหลดธีมนี้ได้จาก http://startbootstrap.com/template-overviews/grayscale/
ดาวน์โหลดธีมสีเทาและคัดลอก CSS, ฟอนต์น่ากลัว, ฟอนต์, img, JS และ index.html ไปยังไดเร็กทอรีสาธารณะของโปรเจ็กต์เว็บไซต์ ด้านล่างนี้คือภาพรวมโครงการหลังจากเพิ่ม CSS, JS, ฟอนต์, โฟลเดอร์รูปภาพและหน้า index.html ภายใต้ไดเรกทอรีสาธารณะของโครงการเว็บไซต์
มาเริ่มโครงการเว็บไซต์ของเรากันเลย:
ในการดำเนินโครงการคุณจะได้เห็นหน้าธีมสีเทาที่ดูดี
เราจะแก้ไขหน้า index.html (ภายใต้ไดเรกทอรีสาธารณะของโครงการเว็บไซต์) เพื่อให้ดูเป็นมืออาชีพ
ด้านล่างนี้คือภาพรวมของโครงการเว็บไซต์หลังจากทำการเปลี่ยนแปลงในหน้า index.html เราเพิ่งเปลี่ยนภาพและแก้ไขข้อความบางส่วนเพื่อให้เฉพาะเจาะจงสำหรับแต่ละบุคคล
คุณสามารถแก้ไข index.html และ grayscale.CSS ได้ตามต้องการ ตอนนี้เราพร้อมที่จะปรับใช้แอปพลิเคชันเว็บไซต์ของเรากับ Heroku
การส่งรหัสไปที่ Github:
ก่อนที่จะปรับใช้แอปพลิเคชันกับ Heroku เราจำเป็นต้องพุชโค้ดของเราไปยังที่เก็บ Github ระยะไกล สำหรับสิ่งนั้นคุณต้องมีบัญชี Github หากคุณไม่มีบัญชี Github ให้ไปสร้างบัญชีที่ www.github.com .
คุณต้องติดตั้ง Github บน Windows ของคุณด้วย ดาวน์โหลด Github สำหรับ windows จาก https://windows.github.com/ .
เมื่อคุณดาวน์โหลดและติดตั้ง Github บนเครื่องของคุณแล้วให้เปิดแอปพลิเคชัน Github และกำหนดค่าข้อมูลรับรอง Github ของคุณและเลือก Git Bash shell เป็นเชลล์เริ่มต้นของคุณ (คุณสามารถเลือกตัวเลือกอื่น ๆ ได้ตามต้องการ) จากนั้นบันทึกการเปลี่ยนแปลง
คุณต้องสร้างที่เก็บบน Github ซึ่งเราจะบันทึกโครงการเว็บไซต์ของเราจากระยะไกล ในการสร้างที่เก็บให้เข้าสู่ระบบ Github และคลิกที่ตัวเลือกที่เก็บใหม่ที่แสดงในปุ่มสีเขียว
ตั้งชื่อที่เก็บของคุณ (ในกรณีนี้เราตั้งชื่อว่า railtoheroku) และคลิกที่ลิงค์สร้างที่เก็บดังที่แสดงด้านล่าง
Github จะให้ URL ระยะไกล ( https://github.com/eMahtab/railtoheroku.git ในกรณีนี้) สำหรับพื้นที่เก็บข้อมูล railtoheroku ซึ่งจะต้องใช้ในขณะที่กดรหัสจากเครื่องท้องถิ่นไปยัง Github
ตอนนี้เราพร้อมที่จะส่งรหัสโครงการเว็บไซต์ของเราไปยัง Github ทำตามขั้นตอนด้านล่างเพื่อพุชโค้ดไปยัง Github
เปิด Git shell และใช้คำสั่ง Git init เพื่อเริ่มต้นไดเร็กทอรีเว็บไซต์ดังที่แสดงด้านล่าง:
ตอนนี้เพิ่มไฟล์ทั้งหมดในไดเรกทอรีเว็บไซต์ภายใต้การควบคุมเวอร์ชันโดยเรียกใช้ Git add
คอมมิตไฟล์ทั้งหมดด้วยการรัน Git คอมมิต –m“ Final Commit”
โครงสร้างข้อมูลพจนานุกรมใน java
เพิ่มที่เก็บระยะไกลดังที่แสดงด้านล่าง:
ตอนนี้ขั้นตอนสุดท้ายที่จะส่งรหัสไปยังที่เก็บ Github:
เราทำกับ Github แล้ว ส่วนต่อไปคือการปรับใช้แอปพลิเคชันจริงกับ Heroku
การปรับใช้แอปพลิเคชันกับ Heroku:
สร้างบัญชี Heroku ที่ https://www.heroku.com/
บันทึก : เราต้องทำการเปลี่ยนแปลงบางอย่างสำหรับการปรับใช้แอปพลิเคชันกับ Heroku Heroku ไม่รองรับ SqLite 3 แต่มีฐานข้อมูล PostgreSQL แทน ดังนั้นเราต้องลบการพึ่งพา sqlite3 ออกจาก gemfile Heroku ต้องใช้ rail_12factor gem ซึ่ง Heroku ใช้เพื่อแสดงเนื้อหาแบบคงที่เช่นรูปภาพและสไตล์ชีต การเปลี่ยนแปลงสองอย่างที่จำเป็นใน Gemfile สรุปได้ดังนี้:
ลบ line gem 'sqlite3' ออกจาก Gemfile
เพิ่มบรรทัดต่อไปนี้ใน Gemfile
group: development,: test do #<<<< not in production gem 'sqlite3' end group :production do gem 'pg', '0.17.1' gem 'rails_12factor', '0.0.2' end
ตรวจสอบว่าทุกอย่างทำงานได้ดีหรือไม่หลังจากทำการเปลี่ยนแปลงกับ Gemfile บันทึก Gemfile และเรียกใช้ การติดตั้งมัด ด้วยแฟล็กพิเศษ (- ไม่มีการผลิต) เพื่อป้องกันการติดตั้งอัญมณีการผลิตใด ๆ ในท้องถิ่น
ให้ยอมรับการเปลี่ยนแปลงที่เกิดขึ้นใน Gemfile ไปยังที่เก็บระยะไกลที่ Github:
พุชการเปลี่ยนแปลงไปยังที่เก็บ Github ระยะไกล:
การสร้างแอปพลิเคชันใหม่ที่ Heroku:
เข้าสู่ระบบ Heroku และสร้างแอพใหม่ ฉันตั้งชื่อแอปของฉันว่า railtoheroku คุณสามารถตั้งชื่ออะไรก็ได้ที่คุณต้องการ คลิกที่สร้างแอพเพื่อสร้างแอพที่มีชื่อ
การเชื่อมต่อที่เก็บ Github กับ Heroku App:
ขั้นตอนต่อไปคือการเชื่อมโยงที่เก็บ Github ของคุณกับ Heroku
ด้านล่างเราได้เชื่อมต่อ railtoheroku ที่เก็บ Github ของเรา
เมื่อเราเชื่อมต่อที่เก็บ Github กับ Heroku เราก็พร้อมที่จะปรับใช้แอปพลิเคชันของเรา ในการปรับใช้แอปพลิเคชันให้เลื่อนลงไปที่ตัวเลือกการปรับใช้ด้วยตนเองและคลิกที่ตัวเลือกปรับใช้สาขา
การปรับใช้แอปพลิเคชัน:
เมื่อคุณคลิกที่ Deploy Branch Heroku จะเริ่มติดตั้งอัญมณีจาก Gemfile ในการผลิต:
เมื่อติดตั้งอัญมณีทั้งหมดและติดตั้งแอปพลิเคชันแล้วคุณจะเห็นข้อความแสดงความยินดีจาก Heroku ว่า“ แอปของคุณใช้งานได้สำเร็จแล้ว”
หากต้องการดูแอปพลิเคชันที่ใช้งานได้ของคุณเพียงคลิกที่ปุ่มมุมมองและคุณจะสามารถเห็นแอปของคุณใช้งานได้สำเร็จ
หากคุณประสบปัญหาขณะทำตามขั้นตอนข้างต้นโปรดแสดงความคิดเห็นด้านล่าง หวังว่าคุณจะสนุกกับโพสต์นี้
มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นแล้วเราจะติดต่อกลับไป
กระทู้ที่เกี่ยวข้อง:
การแยกไฟล์ XML โดยใช้ SAX Parser