สร้างและ deploy AngularJS Container - คู่มือสำหรับ Dev

back4app containers เป็นแพลตฟอร์มที่ทรงพลังสำหรับการโฮสต์แอปพลิเคชัน angularjs ด้วยความสามารถในการปรับใช้แอป angularjs ที่ถูก dockerize โดยอัตโนมัติ คุณสามารถเริ่มต้นโปรเจกต์ของคุณในสภาพแวดล้อมที่สามารถปรับขนาดได้และยืดหยุ่นได้อย่างง่ายดาย ในคู่มือนี้ เราจะพาคุณผ่านกระบวนการเตรียมและปรับใช้แอปพลิเคชัน angularjs ของคุณบน back4app containers โดยครอบคลุมทุกอย่างตั้งแต่โปรเจกต์ง่ายๆ ไปจนถึงการตั้งค่าที่ซับซ้อนมากขึ้น เราจะเริ่มต้นด้วยการเตรียมการที่จำเป็น จากนั้นจะไปที่การ dockerize แอปพลิเคชัน การทดสอบในเครื่อง การผลักดันโปรเจกต์ไปยัง github การตั้งค่าโปรเจกต์บน back4app containers การติดตามการปรับใช้ และการแก้ไขปัญหาทั่วไป หากคุณมีคำถามหรือความคิดเห็นใดๆ ยินดีต้อนรับให้เข้าร่วมการสนทนาในช่อง #containers บน back4app community บน slack คุณยังสามารถติดต่อเราที่ community\@back4app com ได้ตลอดเวลา ในทุกช่วงเวลา หากคุณต้องการตรวจสอบโปรเจกต์ angularjs ที่ทำงานได้ตัวอย่างบน back4app containers ให้ไปที่ https //github com/templates back4app/containers angularjs sample https //github com/templates back4app/containers angularjs sample 1 เตรียมแอปพลิเคชัน angularjs ของคุณ ก โครงสร้างโปรเจกต์ ตรวจสอบว่าแอปพลิเคชัน angularjs ของคุณมีโครงสร้างไดเรกทอรีที่เหมาะสม โดยมีไฟล์และโฟลเดอร์ที่จำเป็นทั้งหมด เช่น app , components , และ assets , จัดระเบียบอย่างเหมาะสม จุดเริ่มต้นหลักสำหรับแอปพลิเคชันของคุณควรเป็นไฟล์ app js ข ข้อกำหนด ตรวจสอบว่าข้อกำหนดที่จำเป็นทั้งหมดถูกระบุในไฟล์ package json รวมถึงเวอร์ชันที่ถูกต้องของพวกเขา ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งข้อกำหนดทั้งหมดโดยใช้ npm install หรือ yarn install เพื่อสร้างไฟล์ package lock json หรือ yarn lock ค กระบวนการสร้าง สำหรับโปรเจกต์ที่ซับซ้อนมากขึ้นซึ่งเกี่ยวข้องกับกระบวนการสร้าง ให้แน่ใจว่าสคริปต์และการกำหนดค่าการสร้างของคุณ (เช่น webpack, gulp หรือ grunt) ถูกตั้งค่าอย่างเหมาะสม คุณควรสามารถเรียกใช้กระบวนการสร้างในเครื่องได้โดยไม่มีปัญหา ง ตัวแปรสภาพแวดล้อม หากแอปพลิเคชันของคุณขึ้นอยู่กับตัวแปรสภาพแวดล้อม ให้แน่ใจว่าคุณมีไฟล์ env ที่มีตัวแปรที่จำเป็นกำหนดไว้ เมื่อปรับใช้ไปยัง back4app containers คุณจะต้องกำหนดค่าตัวแปรสภาพแวดล้อมเหล่านี้ในการตั้งค่าการปรับใช้ e การตั้งค่าเซิร์ฟเวอร์ (ถ้าใช้ได้) หากแอปพลิเคชัน angularjs ของคุณรวมเซิร์ฟเวอร์ที่กำหนดเอง (เช่น express) ให้แน่ใจว่ามันถูกตั้งค่าและกำหนดค่าอย่างถูกต้องเพื่อให้บริการแอปพลิเคชัน angularjs ของคุณ ทดสอบเซิร์ฟเวอร์ของคุณในเครื่องเพื่อให้แน่ใจว่ามันทำงานตามที่คาดหวัง f การเพิ่มประสิทธิภาพแอปพลิเคชัน เพิ่มประสิทธิภาพแอปพลิเคชัน angularjs ของคุณโดยการลดขนาดบันเดิล ใช้การแบ่งโค้ด และดำเนินการตามแนวทางปฏิบัติที่ดีที่สุดด้านประสิทธิภาพ ใช้เครื่องมือเช่น lighthouse เพื่อตรวจสอบแอปพลิเคชันของคุณและแก้ไขปัญหาด้านประสิทธิภาพหรือการเข้าถึง g ความเข้ากันได้กับเบราว์เซอร์หลายตัว ทดสอบแอปพลิเคชันของคุณในหลายเบราว์เซอร์และอุปกรณ์เพื่อให้แน่ใจว่าการเรนเดอร์และฟังก์ชันการทำงานถูกต้อง เมื่อคุณได้ตรวจสอบและเตรียมแอปพลิเคชัน angularjs ของคุณอย่างละเอียดแล้ว คุณสามารถดำเนินการไปยังขั้นตอนถัดไป ซึ่งก็คือการสร้าง dockerfile สำหรับโปรเจกต์ของคุณ 2 การทำให้เป็น docker การทำให้แอปพลิเคชัน angularjs เป็น docker หมายถึงการสร้าง dockerfile ในไดเรกทอรีหลักของโปรเจกต์ของคุณ dockerfile จะมีคำสั่งในการสร้างภาพ docker ของแอปพลิเคชันของคุณ ซึ่งสามารถนำไปใช้งานใน back4app containers ได้ นี่คือคำอธิบายโดยละเอียดเกี่ยวกับวิธีการสร้าง dockerfile สำหรับแอปพลิเคชัน angularjs ทั่วไป 1 สร้างไฟล์ใหม่ชื่อ dockerfile (โดยไม่มีนามสกุลไฟล์) ในไดเรกทอรีหลักของแอปพลิเคชัน angularjs ของคุณ 2 กำหนดภาพพื้นฐาน เริ่ม dockerfile โดยการระบุภาพพื้นฐานโดยใช้คำสั่ง from สำหรับแอปพลิเคชัน angularjs ทั่วไป ภาพพื้นฐานควรเป็นภาพ node js เช่น node 14 หรือ node 16 from node 14 3 ตั้งค่าไดเรกทอรีทำงาน ใช้คำสั่ง workdir เพื่อตั้งค่าไดเรกทอรีทำงานสำหรับแอปพลิเคชันของคุณภายในคอนเทนเนอร์ docker นี่คือที่ที่ไฟล์แอปพลิเคชันของคุณจะถูกเก็บและดำเนินการ workdir /app 3 คัดลอก package json และ package lock json คัดลอกไฟล์ package json และ package lock json จากเครื่องของคุณไปยัง docker container โดยใช้คำสั่ง copy ไฟล์เหล่านี้จำเป็นสำหรับการติดตั้ง dependencies ของแอปพลิเคชันของคุณ copy package json / 4 ติดตั้ง dependencies ใช้คำสั่ง run เพื่อติดตั้ง dependencies ของแอปพลิเคชันของคุณจากไฟล์ package json โดยทั่วไปจะใช้ npm ci ซึ่งติดตั้งเวอร์ชันของ dependencies ที่ระบุในไฟล์ package lock json run npm ci 5 คัดลอกไฟล์โปรเจกต์ที่เหลือ ใช้คำสั่ง copy อีกครั้งเพื่อคัดลอกไฟล์และโฟลเดอร์ที่เหลือจากเครื่องของคุณไปยัง docker container copy 6 สร้างแอปพลิเคชัน angularjs เพิ่มคำสั่ง run เพื่อสร้างแอปพลิเคชัน angularjs ของคุณโดยใช้สคริปต์การสร้างของคุณ โดยทั่วไปคือ npm run build ซึ่งจะสร้างเวอร์ชันที่พร้อมสำหรับการผลิตของแอปพลิเคชัน angularjs ของคุณในโฟลเดอร์ dist run npm run build 7 กำหนดค่าเซิร์ฟเวอร์ คุณต้องการเซิร์ฟเวอร์เพื่อให้บริการแอปพลิเคชัน angularjs ที่คุณสร้างขึ้น ตัวเลือกที่พบบ่อยคือ nginx ก่อนอื่นให้ตั้งค่าภาพพื้นฐานสำหรับ nginx from nginx 1 21 alpine 8 คัดลอกแอปพลิเคชัน angularjs ที่สร้างขึ้น ใช้คำสั่ง copy เพื่อคัดลอกแอปพลิเคชัน angularjs ที่สร้างขึ้นจากขั้นตอนก่อนหน้าไปยังไดเรกทอรี html ของ nginx copy from=0 /app/dist /usr/share/nginx/html 9 เปิดเผยพอร์ตเซิร์ฟเวอร์ ใช้คำสั่ง expose เพื่อระบุพอร์ตที่เซิร์ฟเวอร์ของคุณจะทำงานภายในคอนเทนเนอร์ docker ตัวอย่างเช่น คุณสามารถใช้พอร์ต 80 expose 80 10 เริ่มเซิร์ฟเวอร์ คำสั่ง cmd ไม่จำเป็นในกรณีนี้ เนื่องจากคำสั่ง cmd เริ่มต้นสำหรับภาพ nginx 1 21 alpine จะเริ่มเซิร์ฟเวอร์ dockerfile ที่สมบูรณ์สำหรับแอปพลิเคชัน angularjs ปกติควรมีลักษณะดังนี้ from node 14 as builder workdir /app copy package json / run npm ci copy run npm run build from nginx 1 21 alpine copy from=builder /app/dist /usr/share/nginx/html expose 80 ตัวอย่างที่ 1 from node 14 workdir /app copy package json / run npm ci copy run npm run build from nginx\ alpine copy from=0 /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] ตัวอย่างที่ 2 แอปพลิเคชัน angularjs ที่มีเซิร์ฟเวอร์ที่กำหนดเอง from node 14 workdir /app copy package json / run npm ci copy run npm run build from node 14 workdir /app/server copy server/package json / run npm ci copy server/ env node env production env port 8000 expose 8000 cmd \["npm", "start"] 4 ทดสอบโปรเจกต์ของคุณในเครื่อง ก่อนที่จะนำแอปพลิเคชัน angularjs ของคุณไปใช้งานบน back4app containers สิ่งสำคัญคือต้องทดสอบในเครื่องของคุณโดยใช้ docker ซึ่งจะช่วยให้แน่ใจว่าแอปพลิเคชันของคุณทำงานตามที่คาดหวังและช่วยให้คุณระบุและแก้ไขปัญหาก่อนการนำไปใช้งาน สร้างภาพ docker สำหรับแอปพลิเคชัน angularjs ของคุณ ในเทอร์มินัลของคุณ ให้ไปที่ไดเรกทอรีรากของโปรเจกต์ของคุณและรันคำสั่งต่อไปนี้ โดยแทนที่ your app name ด้วยชื่อแอปพลิเคชันของคุณ docker build t your app name รัน docker container ในเครื่อง ถัดไป รันคำสั่งต่อไปนี้เพื่อเริ่ม docker container ในเครื่อง คำสั่งนี้จะแมพพอร์ตที่เปิดเผยของ container (เช่น 80) ไปยังพอร์ตในเครื่องของคุณ (เช่น 3000) docker run p 3000 80 your app name ทดสอบแอปพลิเคชันของคุณ เปิดเว็บเบราว์เซอร์และไปที่ http //localhost 3000 http //localhost 3000/ เพื่อดูแอปพลิเคชัน angularjs ของคุณ ตรวจสอบให้แน่ใจว่าทุกอย่างทำงานตามที่คาดหวัง หากคุณพบปัญหาใด ๆ ให้แก้ไขก่อนที่จะไปยังขั้นตอนถัดไป 5 ผลักดันโปรเจกต์ของคุณไปยัง github สร้าง gitignore ไฟล์ในไดเรกทอรีรากของโปรเจกต์ของคุณเพื่อไม่ให้รวมไฟล์ที่ไม่จำเป็นหรือมีความละเอียดอ่อนจากที่เก็บของคุณ (เช่น, node modules , env , dist , เป็นต้น) เริ่มต้นที่เก็บ git, คอมมิตไฟล์โปรเจกต์ของคุณ, และผลักดันไปยังที่เก็บระยะไกล (เช่น, บน github) gitcopy codegit add git commit m "initial commit" git remote add origin \<your remote repo url> git push u origin master``` 6 ปรับใช้แอปพลิเคชันของคุณบน back4app containers หลังจากสร้างบัญชี back4app ของคุณแล้ว คุณสามารถทำตามขั้นตอนที่ระบุไว้ในเอกสาร 1 เชื่อมต่อที่เก็บ github ของคุณกับ back4app https //www back4app com/docs containers/integrate with github 2 เตรียมโปรเจกต์ของคุณสำหรับการปรับใช้ https //www back4app com/docs containers/prepare your deployment โดยสรุปแล้ว คอนเทนเนอร์จะปฏิบัติตามคำแนะนำที่ระบุใน dockerfile ของคุณและเริ่มสร้างแอปของคุณ 7 ตรวจสอบการปรับใช้และแก้ไขข้อผิดพลาดที่อาจเกิดขึ้น ติดตามบันทึกการปรับใช้และสถานะบนแดชบอร์ด back4app containers แก้ไขข้อผิดพลาดหรือปัญหาที่เกิดขึ้นระหว่างการปรับใช้ ในกรณีของโครงการที่ซับซ้อนมากขึ้น ให้แน่ใจว่าบริการที่จำเป็นทั้งหมด (เช่น ฐานข้อมูลหรือ api ภายนอก) ได้รับการกำหนดค่าและเข้าถึงได้อย่างถูกต้อง 8 การแก้ไขปัญหาทั่วไป ข้อผิดพลาดในการปรับใช้ทั่วไปเมื่อรันแอป angularjs บน back4app containers มีดังนี้ ที่นี่ https //www back4app com/docs containers/troubleshooting ข้อผิดพลาดทั่วไปอื่น ๆ เมื่อปรับใช้แอปพลิเคชัน angularjs ได้แก่ การกำหนดค่าพอร์ตไม่ถูกต้อง แอปพลิเคชัน angularjs ควรได้รับการกำหนดค่าให้ทำงานบนพอร์ตที่ระบุเมื่อปรับใช้บน back4app containers หากแอปพลิเคชันยังไม่สามารถเข้าถึงได้ ให้ตรวจสอบ dockerfile เพื่อให้แน่ใจว่าพอร์ตที่ถูกต้องถูกเปิดเผย (เช่น expose 3000 สำหรับพอร์ต 3000) การพึ่งพาที่ไม่เข้ากันหรือขาดหายไป ให้แน่ใจว่าการพึ่งพาที่จำเป็นทั้งหมดถูกระบุในไฟล์ package json และเวอร์ชันของพวกเขาเข้ากันได้กับกันและกับโค้ดแอปพลิเคชันของคุณ การพึ่งพาที่ขาดหายไปหรือไม่เข้ากันอาจทำให้เกิดข้อผิดพลาดในระหว่างการทำงาน ตัวแปรสภาพแวดล้อมหรือการกำหนดค่าที่ไม่ถูกต้อง ตรวจสอบว่าการใช้งานของคุณขึ้นอยู่กับตัวแปรสภาพแวดล้อมหรือไฟล์การกำหนดค่าที่เฉพาะเจาะจงหรือไม่ และตรวจสอบให้แน่ใจว่าตั้งค่าอย่างถูกต้องในสภาพแวดล้อม back4app containers ตั้งค่าตัวแปรสภาพแวดล้อมที่จำเป็นใน dockerfile ของคุณโดยใช้คำสั่ง env แอปพลิเคชันล่มหรือข้อยกเว้นที่ไม่ได้จัดการ ข้อยกเว้นที่ไม่ได้จัดการหรือการล่มในโค้ดแอปพลิเคชัน angularjs ของคุณอาจทำให้การปรับใช้ล้มเหลวหรือพฤติกรรมที่ไม่คาดคิด ตรวจสอบบันทึกแอปพลิเคชันของคุณสำหรับข้อความแสดงข้อผิดพลาดใด ๆ และแก้ไขปัญหาในโค้ดของคุณ ตรวจสอบบันทึกของคอนเทนเนอร์โดยการรัน docker logs your app name เพื่อดูว่ามีข้อผิดพลาดหรือข้อยกเว้นใด ๆ ที่ถูกโยนออกมา ใช้เครื่องมืออย่าง sentry เพื่อติดตามและตรวจสอบข้อผิดพลาดในแอปพลิเคชันของคุณ การกำหนดค่าการเรนเดอร์ฝั่งเซิร์ฟเวอร์ หากแอปพลิเคชัน angularjs ของคุณใช้การเรนเดอร์ฝั่งเซิร์ฟเวอร์ (ssr) ให้ตรวจสอบให้แน่ใจว่าการตั้งค่า ssr ของคุณถูกกำหนดค่าอย่างถูกต้องใน dockerfile ของคุณและเริ่มแอปพลิเคชันของคุณโดยใช้จุดเริ่มต้นที่ถูกต้อง หากคุณพบปัญหาอื่น ๆ ขณะปรับใช้แอปพลิเคชัน angularjs ของคุณบน back4app containers ให้ติดต่อทีมสนับสนุน back4app ที่ community\@back4app com https //chat openai com/c/b00b65dc 4fb1 47b6 bcf7 3accf1b14587 9 ขยายแอปพลิเคชันของคุณ สำหรับโครงการที่ซับซ้อนมากขึ้นซึ่งต้องการทรัพยากรเพิ่มเติมหรือการขยายแนวนอน/แนวตั้ง ให้พิจารณาอัปเกรดแผน back4app containers ของคุณเพื่อรองรับการจราจรและโหลดที่เพิ่มขึ้น 10 ตัวอย่างแอปพลิเคชัน สำหรับโครงการแอปพลิเคชัน angularjs ตัวอย่างคุณสามารถไปที่ https //github com/templates back4app/containers angular sample https //github com/templates back4app/containers angular sample https //github com/templates back4app/containers angular sample https //github com/templates back4app/containers angular sample