เตรียม Ubuntu (หรือ distro อื่น) สำหรับการพัฒนาเว็บ

นอกเหนือจากตำนานความเชื่อหรือความคิดเห็นที่ว่า GNU / Linux มีความซับซ้อนในการใช้งานฉันคิดว่ามันเป็นระบบปฏิบัติการที่ยอดเยี่ยมสำหรับผู้ที่เป็นนักพัฒนาโดยเฉพาะ นักพัฒนาเว็บ.

ฉันได้มีโอกาสสนทนากับผู้คนมากมายที่ชอบ OS X และแม้กระทั่ง Windows ในการพัฒนาอย่างที่พวกเขาพูดเพราะความง่ายและเครื่องมือของมันและแม้ว่ามันจะเป็นความคิดเห็นส่วนบุคคลของแต่ละคน แต่ฉันเชื่อว่าการแจกจ่าย GNU / Linux หรืออย่างน้อยก็เป็นที่นิยมมากที่สุดมีทุกสิ่งที่คุณต้องการในการติดตั้งและทำงาน

[quote] การแจกแจงที่ได้รับความนิยมสูงสุดนำเสนอแพ็คเกจที่จำเป็นทั้งหมดในที่เก็บสำหรับนักพัฒนาเว็บ [/ quote]

ตอนนี้เกี่ยวกับปัญหาการพัฒนามีปัญหาคือการกระจายที่อัปเดตมากเช่น Antergos หรือสิ่งที่รักษาสมดุลระหว่างความเสถียรและความทันสมัยเป็น อูบุนตู?

ฉันยกตัวอย่างง่ายๆในขณะที่ Ubuntu Trusted เวอร์ชันล่าสุดของ Netbeans คือ 7.0.1 นิ้ว อาร์คลินุกซ์ เวอร์ชัน 8.0.2 พร้อมใช้งาน สิ่งเดียวกันนี้เกิดขึ้นกับ NodeJS และแพ็คเกจอื่น ๆ ที่เราจะเห็นด้านล่างที่ใช้กันอย่างแพร่หลาย ส่วนหน้า.

อย่างไรก็ตามการตัดสินใจของทุกคนคือการเลือกการกระจายของความชอบตามงานที่จะดำเนินการ สำหรับบทความนี้เราจะเริ่มจากการติดตั้ง Ubuntu และเนื่องจากเน้นไปที่ผู้ใช้ใหม่เราจะแสดงกระบวนการทีละขั้นตอน

ติดตั้ง Ubuntu 14.04

สิ่งแรกที่เราจะทำคือดาวน์โหลดอิมเมจการติดตั้ง Ubuntu จากเว็บไซต์ทางการ ลิงค์ด้านล่างนี้จะให้คุณเลือกว่าจะดาวน์โหลด iso 32 บิตหรือ 64 บิต

เมื่อเราดาวน์โหลดแล้วเราจะต้อง "เบิร์น" ดีวีดีด้วย iso ที่ดาวน์โหลดมาหรือเตรียมหน่วยความจำแฟลชเพื่อบูตและติดตั้งจากมัน ใน Windows เราสามารถทำได้โดยทำตาม คู่มือนี้ และบน Mac อื่น ๆ นี้. เมื่อเสร็จแล้วเรารีสตาร์ทพีซีและเริ่มต้นผ่านหน่วยความจำหรือดีวีดี

ขั้นตอนการติดตั้ง Ubuntu 14.04

สิ่งแรกคือการเลือกภาษาที่เราต้องการติดตั้ง Ubuntu:

หลังจากนั้นเราจะดูว่าเรามีข้อกำหนดที่จำเป็นทั้งหมดสำหรับการติดตั้งหรือไม่:

ต่อมาเราไปที่การแบ่งพาร์ติชันฮาร์ดไดรฟ์ หากคุณไม่มีประสบการณ์ในเรื่องนี้ขอแนะนำให้คุณปล่อยให้ทุกอย่างเป็นค่าเริ่มต้นเมื่อคุณสำรองข้อมูลแล้ว

เราเลือกเขตเวลา:

เราเลือกภาษาของแป้นพิมพ์ของเรา:

เรากำหนดชื่อผู้ใช้ชื่อคอมพิวเตอร์รหัสผ่านของเรา:

และเรารอให้มันเสร็จสิ้น:

เมื่อการติดตั้งเสร็จสิ้นเราจะรีสตาร์ทคอมพิวเตอร์และเข้าสู่เซสชันของเรา เราสามารถเรียกใช้ Update Manager หรือเปิดเทอร์มินัลแล้วใส่:

$ sudo apt update && sudo apt upgrade

และหากไม่มีอะไรให้อัปเดตเราสามารถเริ่มต้นได้

การเตรียมพื้นที่ทำงานของเราสำหรับการทดสอบ

ดังนั้นในฐานะที่เราเป็นนักพัฒนาเราต้องการมุ่งเน้นเฉพาะสิ่งที่เรารู้ว่าต้องทำอย่างไร: พัฒนา. เราไม่สนใจที่จะรู้วิธีกำหนดค่าเว็บเซิร์ฟเวอร์หรือวิธีการทำงานของฐานข้อมูลเราแค่ต้องการสิ่งที่ใช้งานได้และง่ายต่อการนำไปใช้เพื่อเริ่มเขียนโค้ด

ถ้าเราต้องเขียนด้วย HTML, CSS, JS ทุกอย่างจะง่ายขึ้น แต่บางครั้งเราต้องมีเซิร์ฟเวอร์ทดสอบโค้ดใน PHP, Ruby, DJango เป็นต้นดังนั้นจึงขอแนะนำ ตั้งค่าเว็บเซิร์ฟเวอร์ของเราเอง. โชคดีสำหรับเราเรามีสิ่งอำนวยความสะดวกนี้ในสองวิธีที่แตกต่างกัน:

1. การใช้โปรแกรมติดตั้ง XAMPP สิ่งที่ให้เรา อาปาเช่.
2. การใช้ โคมไฟบิทนามิ.

การติดตั้ง Bitnami

การติดตั้ง LAMP ผ่าน Bitnami เราได้เห็นมันแล้ว ในบทความก่อนหน้านี้จึงไม่จำเป็นต้องกล่าวถึงในบทความนี้ เมื่อติดตั้ง Bitnami แล้วเราสามารถจัดการเซิร์ฟเวอร์ทดสอบของเราผ่านเว็บเบราว์เซอร์

เอกสารที่จำเป็นทั้งหมดเกี่ยวกับวิธีการทำงานของ Bitnami มีอยู่ที่ wiki ของเขา.

การติดตั้ง XAMPP

ตัวติดตั้ง XAMPP มาจาก Bitnami เช่นกัน แต่กระบวนการติดตั้งจะแตกต่างกันเล็กน้อยดังนั้นเราจะดำเนินการทีละขั้นตอน สิ่งแรกที่แน่นอนคือการดาวน์โหลดไฟล์ที่เราสนใจตามสถาปัตยกรรมของโปรเซสเซอร์ของเรา:

เมื่อดาวน์โหลดแล้วเราจะเปิดเทอร์มินัลและเข้าถึงโฟลเดอร์ที่ไฟล์นั้นอยู่ซึ่งเราจะให้สิทธิ์ในการดำเนินการ ในกรณีของไฟล์ 64 Bit จะเป็น:

$ sudo chmod a+x xampp-linux-x64-5.5.19-0-installer.run

ตอนนี้ในเทอร์มินัลเดียวกันเราดำเนินการ:

$ sudo ./xampp-linux-x64-5.5.19-0-installer.run

และเราทำตามขั้นตอนต่อไปนี้

ในภาพก่อนหน้านี้ถามเราว่าเราต้องการติดตั้งไฟล์สำหรับนักพัฒนาหรือไม่และในภายหลังหากเราเห็นด้วยกับการเลือกที่เราเลือก

ตอนนี้มันถามเราถึงเส้นทางที่เราต้องการติดตั้ง (โดยค่าเริ่มต้นจะอยู่ใน / opt / lampp) และแม้ว่าเราจะสามารถเปลี่ยนได้ แต่ขอแนะนำให้ปล่อยไว้ตามที่เป็นอยู่

อีกหนึ่งขั้นตอนตรวจสอบก่อนเริ่มติดตั้ง

การติดตั้ง XAMPP

การติดตั้งเสร็จสมบูรณ์.

ตอนนี้ในการเริ่ม XAMPP เราต้องดำเนินการ:

$ sudo / opt / lampp / lampp เริ่มต้น XAMPP สำหรับ Linux 5.5.19-0 ... XAMPP: เริ่มต้น Apache ... ตกลง XAMPP: เริ่มต้น MySQL ... ตกลง XAMPP: เริ่มต้น ProFTPD ... ตกลง

และเรามีเซิร์ฟเวอร์ Apache + MySQL + PHP + Perl ที่ทำงานอยู่แล้ว หากคุณมีปัญหาฉันขอแนะนำให้คุณไปที่ คำถามที่พบบ่อย.

Custom DNS และ Virtual Host ด้วย XAMPP

สมมติว่าเรามีหลายไซต์ที่โฮสต์บนเซิร์ฟเวอร์ทดสอบของเราเราสามารถตั้งค่าให้แต่ละไซต์ดูในไฟล์ได้ / etc / hosts. ลองมาเป็นตัวอย่างสมมติว่าเรามีไซต์ dev.tests.comสิ่งที่เราทำคือเปิดไฟล์ / etc / hosts ด้วยโปรแกรมแก้ไขข้อความที่เราชื่นชอบ (และเป็นรูท) และเพิ่มด้วยวิธีต่อไปนี้:

$ sudo vim /etc/hosts

และเราเพิ่มบรรทัด:

127.0.0.1   dev.prueba.com

แต่แน่นอนว่านี่ไม่เพียงพอเพราะเราต้องบอกกับ Apache ว่าเมื่อมีคนร้องขอ dev.test.com สำหรับ 127.0.0.1 คุณต้องส่งคืนไซต์ทดสอบของเรา

เราแก้ไขไฟล์ /opt/lampp/etc/httpd.conf

$ sudo vim /opt/lampp/etc/httpd.conf

และไม่ใส่ความคิดเห็น (ลบเครื่องหมายปอนด์) บรรทัดที่ระบุว่า:

# Include etc/extra/httpd-vhosts.conf

และเราปล่อยไว้แบบนี้:

Include etc/extra/httpd-vhosts.conf

ตอนนี้เราไปที่ไฟล์ /opt/lampp/etc/extra/httpd-vhosts.conf ซึ่งควรมีดังนี้:

# ใช้โฮสต์เสมือนตามชื่อเท่านั้นดังนั้นเซิร์ฟเวอร์ไม่จำเป็นต้องกังวลเกี่ยวกับ # ที่อยู่ IP สิ่งนี้ระบุโดยเครื่องหมายดอกจันในคำสั่งด้านล่าง # # โปรดดูเอกสารที่ # # สำหรับรายละเอียดเพิ่มเติมก่อนที่คุณจะพยายามตั้งค่าโฮสต์เสมือน # # คุณสามารถใช้ตัวเลือกบรรทัดคำสั่ง '-S' เพื่อตรวจสอบการกำหนดค่าโฮสต์เสมือนของคุณ # # # VirtualHost ตัวอย่าง: # เกือบทุกคำสั่ง Apache อาจเข้าสู่คอนเทนเนอร์ VirtualHost # ส่วน VirtualHost แรกใช้สำหรับคำขอทั้งหมดที่ไม่ # ตรงกับ ServerName หรือ ServerAlias ​​ในบล็อกใด ๆ # ServerAdmin webmaster@dummy-host.example.com DocumentRoot "/opt/lampp/docs/dummy-host.example.com" ServerName dummy-host.example.com ServerAlias ​​www.dummy-host.example.com ErrorLog "logs / dummy -host.example.com-error_log "CustomLog" บันทึก / dummy-host.example.com-access_log "common ServerAdmin webmaster@dummy-host2.4.example.com DocumentRoot "/opt/lampp/docs/dummy-host80.example.com" ServerName dummy-host80.example.com ErrorLog "logs / dummy-host2.example.com-error_log" CustomLog "logs / dummy-host2.example.com-access_log" ทั่วไป

เราแก้ไขและปล่อยให้เป็นแบบนี้:

# ใช้โฮสต์เสมือนตามชื่อเท่านั้นดังนั้นเซิร์ฟเวอร์ไม่จำเป็นต้องกังวลเกี่ยวกับ # ที่อยู่ IP สิ่งนี้ระบุด้วยเครื่องหมายดอกจันในคำสั่งด้านล่าง # # โปรดดูเอกสารที่ # # สำหรับรายละเอียดเพิ่มเติมก่อนที่คุณจะพยายามตั้งค่าโฮสต์เสมือน # # คุณสามารถใช้ตัวเลือกบรรทัดคำสั่ง '-S' เพื่อตรวจสอบการกำหนดค่าโฮสต์เสมือนของคุณ # # # VirtualHost ตัวอย่าง: # เกือบทุกคำสั่ง Apache อาจเข้าสู่คอนเทนเนอร์ VirtualHost # ส่วน VirtualHost แรกใช้สำหรับคำขอทั้งหมดที่ไม่ # ตรงกับ ServerName หรือ ServerAlias ​​ในบล็อกใด ๆ # DocumentRoot "/ home / path / folder / project /" ServerName my_blog.dev ต้องได้รับอนุญาตทั้งหมด

แน่นอนว่าต้องระบุเส้นทางไปยังโฟลเดอร์โครงการของเราเมื่อทำการแทนที่ "/ บ้าน / เส้นทาง / โฟลเดอร์ / โครงการ /".

คู่มือการติดตั้งหลอดไฟ

ตอนนี้แม้ว่ามันอาจจะดูไม่เหมือน แต่ฉันคิดว่าการติดตั้งด้วยวิธีก่อนหน้านี้ยุ่งยากกว่าการติดตั้งแพ็คเกจโดยตรงจากที่เก็บของเรา ในการมี Stack เดียวกันบนพีซีของเราเราต้องเปิดเทอร์มินัลและวาง:

$ sudo apt install apache2 mysql-server-5.5 phpmyadmin

ด้วยแพ็คเกจทั้ง 3 นี้เท่านั้นการอ้างอิงที่จำเป็นจะถูกติดตั้งเพื่อเริ่มทำงานตามขั้นต่ำที่จำเป็นเมื่อพัฒนา

Custom DNS และ Virtual Host พร้อม LAMP

ในส่วนของ DNS (Domain Name Server) เราทำให้ทุกอย่างเหมือนเดิมนั่นคือเราเพิ่มชื่อของไซต์ทดสอบของเราในไฟล์ / etc / hosts. ตอนนี้ในกรณีของ Apache เส้นทางของ VHost (Virtual Hosts) นั้นแตกต่างกัน

โดยปกติสิ่งที่ทำคือการวางสิ่งที่เราใส่ไว้ในไฟล์ /opt/lampp/etc/extra/httpd-vhosts.conf ในเส้นทาง /etc/apache2/sites-available/vhostname.confจากนั้นลิงก์สัญลักษณ์จะถูกสร้างไปยังไฟล์นั้นในโฟลเดอร์ / etc / apache2 / sites-enabled / แต่เราจะไม่ซับซ้อน เราจะใส่ไฟล์เข้าไปโดยตรง / etc / apache2 / sites-enabled / ด้วยการกำหนดค่าต่อไปนี้:

$ sudo vim /etc/apache2/sites-enabled/dev.pruebe.com.conf DocumentRoot "/ home / path / folder / project /" ServerName my_blog.dev ต้องได้รับอนุญาตทั้งหมด

ฉันคิดว่ามันถูกต้องที่จะชี้แจงว่าเมื่อเราติดตั้งด้วยตนเองเส้นทางเริ่มต้นของโฟลเดอร์เว็บไซต์คือ / var / www / http /.

การติดตั้ง NodeJS และ Ruby

ถ้าเราใช้ NodeJS o ทับทิม (แทน PHP และ Perl) เราสามารถติดตั้งแพ็คเกจด้วยตนเองโดยดำเนินการในคอนโซล:

$ sudo apt install nodejs ruby

และหากพวกเขาต้องการแพ็คเกจเพิ่มเติมพวกเขาก็ต้องค้นหาโดยเรียกใช้ตัวจัดการแพ็คเกจหรือในคอนโซล:

$ sudo apt search paquete a buscar

จนกว่าส่วนนี้เราจะมีส่วนฝั่งเซิร์ฟเวอร์พร้อมสำหรับแซนด์บ็อกซ์ของเราแล้วตอนนี้เรามาดูแอปพลิเคชันบางส่วนที่เราสามารถใช้ได้

เครื่องมือพัฒนาเว็บ

ในที่เก็บเรามีแอปพลิเคชันบางอย่างที่จะช่วยให้เราทำงานได้อย่างสะดวกสบายเมื่อพูดถึง HTML, CSS, JS และอื่น ๆ เรามี:

• Bluefish
• Geany
• Gedit
• เคท

กำลัง บลูฟิช (ในความคิดของฉัน) สมบูรณ์ที่สุดเมื่อมันมาถึงที่ทำงาน ส่วนหน้าแต่ฉันขอแนะนำให้ติดตั้งแอปพลิเคชันของบุคคลที่สามที่มีฟังก์ชันการทำงานที่หลากหลายมากขึ้น เรามีตัวอย่างเช่น วงเล็บ, ข้อความประเสริฐ o โคโมโด - แก้ไข. แอปพลิเคชันทั้งหมดนี้มีแพ็คเกจการติดตั้งสำหรับ Ubuntu เป็นของตัวเองยกเว้น Komodo-Edit ซึ่งจะต้องแตกไฟล์และเรียกใช้ไฟล์. sh เท่านั้น

(… อยู่ในขั้นตอน …)