รันแอปพลิเคชัน Container ด้วย ReactJS

back4app containers เป็นแพลตฟอร์มที่ทรงพลังสำหรับการโฮสต์แอปพลิเคชัน react ด้วยความสามารถในการปรับใช้แอป react ที่ทำเป็น docker โดยอัตโนมัติ คุณสามารถเปิดตัวโปรเจกต์ของคุณในสภาพแวดล้อมที่สามารถปรับขนาดได้และยืดหยุ่นได้อย่างง่ายดาย ในคู่มือนี้ เราจะพาคุณไปผ่านกระบวนการเตรียมและปรับใช้แอปพลิเคชัน react ของคุณบน back4app containers โดยครอบคลุมทุกอย่างตั้งแต่โปรเจกต์ง่ายๆ ไปจนถึงการตั้งค่าที่ซับซ้อนมากขึ้น เราจะเริ่มต้นด้วยการเตรียมการที่จำเป็น จากนั้นจะไปที่การทำ docker ให้กับแอปพลิเคชัน การทดสอบในเครื่อง การผลักดันโปรเจกต์ไปยัง github การตั้งค่าโปรเจกต์บน back4app containers การติดตามการปรับใช้ และการแก้ไขปัญหาทั่วไป หากคุณมีคำถามหรือความคิดเห็นใดๆ ยินดีให้เข้าร่วมการสนทนาในช่อง #containers บน back4app community บน slack สำหรับการสนทนาที่เฉพาะเจาะจงเกี่ยวกับ react บน back4app containers คุณยังสามารถติดต่อเราได้ที่ community\@back4app com ในทุกเวลา หากคุณต้องการตรวจสอบตัวอย่างโปรเจกต์ react ที่ทำงานได้บน back4app containers ให้ไปที่ https //github com/templates back4app/containers react sample 1 เตรียมแอปพลิเคชัน react ของคุณ ก โครงสร้างโปรเจกต์ ตรวจสอบให้แน่ใจว่าแอปพลิเคชัน react ของคุณมีโครงสร้างไดเรกทอรีที่เหมาะสม โดยมีไฟล์และโฟลเดอร์ที่จำเป็นทั้งหมด เช่น src , public , components , และ assets , จัดระเบียบอย่างเหมาะสม จุดเริ่มต้นหลักสำหรับแอปพลิเคชันของคุณควรเป็น src/index js หรือ src/index jsx ไฟล์ ข ขึ้นอยู่กับ ตรวจสอบให้แน่ใจว่าขึ้นอยู่ทั้งหมดที่จำเป็นถูกระบุใน package json ไฟล์ รวมถึงเวอร์ชันที่ถูกต้องของพวกเขา ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งขึ้นอยู่ทั้งหมดโดยใช้ npm install หรือ yarn install เพื่อสร้าง package lock json หรือ yarn lock ไฟล์ ค กระบวนการสร้าง สำหรับโปรเจกต์ที่ซับซ้อนมากขึ้นที่เกี่ยวข้องกับกระบวนการสร้าง ให้แน่ใจว่าสคริปต์และการกำหนดค่าการสร้างของคุณ (เช่น webpack, babel, หรือ create react app) ถูกตั้งค่าอย่างถูกต้อง คุณควรสามารถรันกระบวนการสร้างในเครื่องได้โดยไม่มีปัญหา ง ตัวแปรสภาพแวดล้อม หากแอปพลิเคชันของคุณขึ้นอยู่กับตัวแปรสภาพแวดล้อม ให้แน่ใจว่าคุณมี env ไฟล์ที่มีตัวแปรที่จำเป็นกำหนดไว้ เมื่อทำการปรับใช้ไปยัง back4app containers คุณจะต้องกำหนดค่าตัวแปรสภาพแวดล้อมเหล่านี้ในการตั้งค่าการปรับใช้ จ การตั้งค่าเซิร์ฟเวอร์ (ถ้าใช้) หากแอปพลิเคชัน react ของคุณรวมถึงเซิร์ฟเวอร์ที่กำหนดเอง (เช่น express) ให้แน่ใจว่ามันถูกตั้งค่าและกำหนดค่าอย่างถูกต้องเพื่อให้บริการแอปพลิเคชัน react ของคุณ ทดสอบเซิร์ฟเวอร์ของคุณในเครื่องเพื่อให้แน่ใจว่ามันทำงานตามที่คาดหวัง f การเพิ่มประสิทธิภาพแอปพลิเคชัน ปรับปรุงแอปพลิเคชัน react ของคุณโดยการลดขนาดบันเดิล ใช้การแบ่งโค้ด และนำแนวทางปฏิบัติที่ดีที่สุดด้านประสิทธิภาพมาใช้ ใช้เครื่องมืออย่าง lighthouse เพื่อตรวจสอบแอปพลิเคชันของคุณและแก้ไขปัญหาด้านประสิทธิภาพหรือการเข้าถึงใดๆ g ความเข้ากันได้กับเบราว์เซอร์ ทดสอบแอปพลิเคชันของคุณในหลายเบราว์เซอร์และอุปกรณ์เพื่อให้แน่ใจว่าการแสดงผลและฟังก์ชันการทำงานถูกต้อง เมื่อคุณได้ตรวจสอบและเตรียมแอปพลิเคชัน react ของคุณอย่างละเอียดแล้ว คุณสามารถดำเนินการไปยังขั้นตอนถัดไป ซึ่งก็คือการสร้าง dockerfile สำหรับโปรเจกต์ของคุณ 2 การทำ docker การทำ docker ให้กับแอปพลิเคชัน react เกี่ยวข้องกับการสร้าง dockerfile ในไดเรกทอรีหลักของโปรเจกต์ของคุณ dockerfile จะมีคำสั่งในการสร้างภาพ docker ของแอปพลิเคชันของคุณ ซึ่งสามารถนำไปใช้งานใน back4app containers ได้ นี่คือคำอธิบายโดยละเอียดเกี่ยวกับวิธีการสร้าง dockerfile สำหรับแอปพลิเคชัน react ทั่วไป 1 สร้างไฟล์ใหม่ชื่อ dockerfile (โดยไม่มีนามสกุลไฟล์) ในไดเรกทอรีหลักของแอปพลิเคชัน react ของคุณ 2 กำหนดภาพพื้นฐาน เริ่ม dockerfile โดยการระบุภาพพื้นฐานโดยใช้คำสั่ง from สำหรับแอปพลิเคชัน react ทั่วไป ภาพพื้นฐานควรเป็นภาพ node js เช่น node 14 หรือ node 16 from node 14 3 ตั้งค่าไดเรกทอรีทำงาน ใช้คำสั่ง workdir เพื่อตั้งค่าไดเรกทอรีทำงานสำหรับแอปพลิเคชันของคุณภายใน docker container นี่คือที่ที่ไฟล์แอปพลิเคชันของคุณจะถูกเก็บและดำเนินการ workdir /app 3 คัดลอก package json และ package lock json คัดลอกไฟล์ package json และ package lock json จากเครื่องของคุณไปยัง docker container โดยใช้คำสั่ง copy ไฟล์เหล่านี้จำเป็นสำหรับการติดตั้งการพึ่งพาของแอปพลิเคชันของคุณ copy package json / 4 ติดตั้ง dependencies ใช้คำสั่ง run เพื่อติดตั้ง dependencies ของแอปพลิเคชันของคุณจากไฟล์ package json โดยทั่วไปจะทำโดยใช้ npm ci ซึ่งจะติดตั้งเวอร์ชันของ dependencies ที่ระบุในไฟล์ package lock json อย่างแม่นยำ run npm ci 5 คัดลอกไฟล์โปรเจกต์ที่เหลือ ใช้คำสั่ง copy อีกครั้งเพื่อลอกไฟล์และโฟลเดอร์ที่เหลือจากเครื่องของคุณไปยัง docker container copy 6 สร้างแอปพลิเคชัน react เพิ่มคำสั่ง run เพื่อสร้างแอปพลิเคชัน react ของคุณโดยใช้สคริปต์การสร้างของคุณ โดยทั่วไปคือ npm run build ซึ่งจะสร้างเวอร์ชันที่พร้อมสำหรับการผลิตของแอปพลิเคชัน react ของคุณในโฟลเดอร์ build run npm run build 7 กำหนดค่าเซิร์ฟเวอร์ คุณต้องมีเซิร์ฟเวอร์เพื่อให้บริการแอปพลิเคชัน react ที่คุณสร้างขึ้น ตัวเลือกทั่วไปคือ serve ก่อนอื่นให้ติดตั้งมันทั่วโลกใน docker container โดยใช้คำสั่ง run run npm install g serve 8 เปิดเผยพอร์ตเซิร์ฟเวอร์ ใช้คำสั่ง expose เพื่อระบุพอร์ตที่เซิร์ฟเวอร์ของคุณจะทำงานภายใน docker container ตัวอย่างเช่น คุณสามารถใช้พอร์ต 5000 expose 5000 9 เริ่มเซิร์ฟเวอร์ ใช้คำสั่ง cmd เพื่อระบุคำสั่งที่เริ่มเซิร์ฟเวอร์เพื่อให้บริการแอปพลิเคชัน react ที่คุณสร้างขึ้น ด้วย serve คุณสามารถระบุธง s สำหรับแอปพลิเคชันหน้าเดียวและโฟลเดอร์ build เป็นแหล่งข้อมูล cmd \["serve", " s", "build", " l", "5000"] dockerfile ที่สมบูรณ์สำหรับแอปพลิเคชัน react ปกติควรมีลักษณะดังนี้ from node 14 workdir /app copy package json / run npm ci copy run npm run build run npm install g serve expose 5000 cmd \["serve", " s", "build", " l", "5000"] ตัวอย่าง dockerfiles อื่น ๆ ที่คุณสามารถใช้เป็นข้อมูลอ้างอิง ตัวอย่างที่ 1 แอปพลิเคชัน react พื้นฐาน dockerfile นี้สำหรับแอปพลิเคชัน react ที่เรียบง่าย มันติดตั้งแพ็คเกจที่จำเป็นจากไฟล์ package json คัดลอกไฟล์โปรเจ็กต์ และให้บริการแอปพลิเคชัน react โดยใช้ nginx ที่เปิดพอร์ต 80 คำสั่ง cmd ระบุคำสั่งในการเริ่มเซิร์ฟเวอร์ nginx \# stage 1 build the react application from node 14 as build workdir /app copy package json / run npm install copy run npm run build \# stage 2 serve the react application using nginx from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html \# copy the default nginx conf provided by the docker image copy nginx/nginx conf /etc/nginx/conf d/default conf expose 80 cmd \["nginx", " g", "daemon off;"] ตัวอย่างที่ 2 แอปพลิเคชัน react ที่มีเซิร์ฟเวอร์ที่กำหนดเอง dockerfile นี้สำหรับแอปพลิเคชัน react ที่ซับซ้อนมากขึ้นซึ่งใช้เซิร์ฟเวอร์ที่กำหนดเอง (เช่น express) มันติดตั้งแพ็คเกจที่จำเป็นจากไฟล์ package json คัดลอกไฟล์โปรเจ็กต์ และเปิดพอร์ต 8000 สำหรับเซิร์ฟเวอร์ที่กำหนดเอง คำสั่ง cmd ระบุคำสั่งในการเริ่มเซิร์ฟเวอร์ที่กำหนดเอง \# base image from node 14 \# working directory workdir /app \# copy package json and package lock json and install dependencies copy package json / run npm ci \# copy the rest of the project files copy \# expose the server port expose 8000 \# command to start the server cmd \["npm", "run", "server"] 4 ทดสอบโปรเจคของคุณในเครื่อง ก่อนที่จะนำแอปพลิเคชัน react ของคุณไปใช้งานบน back4app containers สิ่งสำคัญคือการทดสอบในเครื่องของคุณโดยใช้ docker ซึ่งจะช่วยให้แน่ใจว่าแอปพลิเคชันของคุณทำงานตามที่คาดหวังและช่วยให้คุณระบุและแก้ไขปัญหาก่อนการนำไปใช้งาน สร้างภาพ docker สำหรับแอปพลิเคชัน react ของคุณ ในเทอร์มินัลของคุณ ให้ไปที่ไดเรกทอรีรากของโปรเจคและรันคำสั่งต่อไปนี้ โดยแทนที่ your app name ด้วยชื่อของแอปพลิเคชันของคุณ docker build t your app name รัน docker container ในเครื่อง ถัดไป รันคำสั่งต่อไปนี้เพื่อเริ่ม docker container ในเครื่อง คำสั่งนี้จะแมพพอร์ตที่เปิดเผยของ container (เช่น 3000) ไปยังพอร์ตในเครื่องของคุณ (เช่น 3000) docker run p 3000 3000 your app name ทดสอบแอปพลิเคชันของคุณ เปิดเว็บเบราว์เซอร์และไปที่ http //localhost 3000 http //localhost 3000 เพื่อดูแอปพลิเคชัน react ของคุณ ตรวจสอบให้แน่ใจว่าทุกอย่างทำงานตามที่คาดหวัง หากคุณพบปัญหาใด ๆ ให้แก้ไขก่อนที่จะไปยังขั้นตอนถัดไป 5 ผลักดันโปรเจกต์ของคุณไปยัง github สร้าง gitignore ไฟล์ในไดเรกทอรีรากของโปรเจกต์ของคุณเพื่อไม่ให้รวมไฟล์ที่ไม่จำเป็นหรือมีความละเอียดอ่อนจากที่เก็บของคุณ (เช่น node modules , env , build , เป็นต้น) เริ่มต้นที่เก็บ git, คอมมิตไฟล์โปรเจกต์ของคุณ, และผลักดันไปยังที่เก็บระยะไกล (เช่น บน github) git 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 2 เตรียมโปรเจกต์ของคุณสำหรับการปรับใช้ โดยสรุป คอนเทนเนอร์จะปฏิบัติตามคำแนะนำที่ระบุใน dockerfile ของคุณและเริ่มสร้างแอปของคุณ 7 ตรวจสอบการปรับใช้และแก้ไขข้อผิดพลาดที่อาจเกิดขึ้น ติดตามบันทึกการปรับใช้และสถานะบนแดชบอร์ด back4app containers แก้ไขข้อผิดพลาดหรือปัญหาที่เกิดขึ้นระหว่างการปรับใช้ ในกรณีของโปรเจกต์ที่ซับซ้อนมากขึ้น ให้แน่ใจว่าบริการที่จำเป็นทั้งหมด (เช่น ฐานข้อมูลหรือ api ภายนอก) ได้รับการกำหนดค่าและเข้าถึงได้อย่างถูกต้อง 8 การแก้ไขปัญหาทั่วไป ข้อผิดพลาดทั่วไปในการติดตั้งเมื่อรันแอป react บน back4app containers มีดังนี้ ที่นี่ ข้อผิดพลาดทั่วไปอื่น ๆ เมื่อปรับใช้แอปพลิเคชัน react ได้แก่ ใช้ npm start แทนที่จะเป็น npm run build npm start แนะนำเมื่อคุณมีสถานการณ์การพัฒนา แต่สำหรับสภาพแวดล้อมการผลิตจะเหมาะสมกว่าที่จะใช้ npm run build นอกจากนี้คำสั่งการสร้างนี้จะส่งผลให้การใช้หน่วยความจำน้อยลง ให้บริการไฟล์สถิตด้วย nginx อีกแนวทางที่ดีคือการให้บริการไฟล์สถิตด้วยเซิร์ฟเวอร์แอปพลิเคชันเช่น nginx การกำหนดค่าพอร์ตที่ไม่ถูกต้อง แอปพลิเคชัน react ควรได้รับการกำหนดค่าให้ทำงานบนพอร์ตที่กำหนดเมื่อปรับใช้บน back4app containers หากแอปพลิเคชันยังไม่สามารถเข้าถึงได้ ให้ตรวจสอบ dockerfile เพื่อให้แน่ใจว่าพอร์ตที่ถูกต้องถูกเปิดเผย (เช่น expose 5000 สำหรับพอร์ต 5000) การพึ่งพาที่ไม่เข้ากันหรือขาดหายไป ตรวจสอบให้แน่ใจว่าการพึ่งพาที่จำเป็นทั้งหมดถูกระบุในไฟล์ package json และเวอร์ชันของพวกเขาเข้ากันได้กับกันและกับโค้ดแอปพลิเคชันของคุณ การพึ่งพาที่ขาดหายไปหรือไม่เข้ากันสามารถนำไปสู่ข้อผิดพลาดในการรันไทม์ ตัวแปรสภาพแวดล้อมหรือการกำหนดค่าที่ไม่ถูกต้อง ตรวจสอบว่าแอปพลิเคชันของคุณพึ่งพาตัวแปรสภาพแวดล้อมหรือไฟล์การกำหนดค่าที่เฉพาะเจาะจงหรือไม่ และตรวจสอบให้แน่ใจว่าพวกเขาถูกตั้งค่าอย่างถูกต้องในสภาพแวดล้อมของ back4app containers ตั้งค่าตัวแปรสภาพแวดล้อมที่จำเป็นใน dockerfile ของคุณโดยใช้คำสั่ง env แอปพลิเคชันล่มหรือข้อยกเว้นที่ไม่ได้จัดการ ข้อยกเว้นที่ไม่ได้จัดการหรือการล่มในโค้ดแอปพลิเคชัน react ของคุณอาจทำให้การปรับใช้ล้มเหลวหรือพฤติกรรมที่ไม่คาดคิด ตรวจสอบบันทึกแอปพลิเคชันของคุณสำหรับข้อความแสดงข้อผิดพลาดใด ๆ และแก้ไขปัญหาใด ๆ ในโค้ดของคุณ ตรวจสอบบันทึกของคอนเทนเนอร์โดยการรัน docker logs your app name เพื่อตรวจสอบว่ามีข้อผิดพลาดหรือข้อยกเว้นใด ๆ ที่ถูกโยนออกมา ใช้เครื่องมือเช่น sentry เพื่อติดตามและตรวจสอบข้อผิดพลาดในแอปพลิเคชันของคุณ การกำหนดค่าการเรนเดอร์ฝั่งเซิร์ฟเวอร์ หากแอปพลิเคชัน react ของคุณใช้การเรนเดอร์ฝั่งเซิร์ฟเวอร์ (ssr) ให้แน่ใจว่าการตั้งค่า ssr ของคุณถูกกำหนดค่าอย่างถูกต้องใน dockerfile ของคุณและเริ่มแอปพลิเคชันของคุณโดยใช้จุดเริ่มต้นที่ถูกต้อง หากคุณพบปัญหาอื่น ๆ ขณะปรับใช้แอปพลิเคชัน react ของคุณบน back4app containers ให้ติดต่อทีมสนับสนุน back4app ที่ community\@back4app com 9 ปรับขนาดแอปพลิเคชันของคุณ สำหรับโครงการที่ซับซ้อนมากขึ้นซึ่งต้องการทรัพยากรเพิ่มเติมหรือการปรับขนาดแนวนอน/แนวตั้ง ให้พิจารณาอัปเกรดแผน back4app containers ของคุณเพื่อรองรับการเข้าชมและโหลดที่เพิ่มขึ้น 10 แอปพลิเคชันตัวอย่าง สำหรับโครงการแอปพลิเคชัน django ตัวอย่างคุณสามารถไปที่ https //github com/templates back4app/containers python flask sample