วิธีทำแพ็กเกจแอปพลิเคชัน VueJS + NodeJS + MongoDB ใน Docker

ดังที่คุณเข้าใจได้จากบทความที่แล้ว ฉันทำงานในโครงการต่างๆ วันแรกในทีมใหม่มักจะเป็นไปในลักษณะเดียวกัน: แบ็กเอนด์จะนั่งคุยกับฉันและดำเนินการมหัศจรรย์เพื่อติดตั้งและปรับใช้แอปพลิเคชัน Docker เป็นสิ่งที่ขาดไม่ได้สำหรับนักพัฒนาส่วนหน้าเพราะ... แบ็กเอนด์มักเขียนด้วยสแต็ก PHP/Java/Python/C# ที่หลากหลาย และส่วนหน้าไม่จำเป็นต้องหันเหความสนใจของแบ็กเอนด์ทุกครั้งเพื่อติดตั้งและปรับใช้ทุกอย่าง ฉันเห็นการผสมผสานระหว่าง Docker-Jenkins กับการปรับใช้ บันทึก และการทดสอบอัตโนมัติที่โปร่งใสในที่เดียวเท่านั้น

มีการเขียนบทความโดยละเอียดมากมายเกี่ยวกับ Docker บทความนี้จะพูดถึงการปรับใช้ Single Page Application โดยใช้ VueJS/Vue Router ส่วนเซิร์ฟเวอร์จะอยู่ในรูปแบบของ RESTful API พร้อม NodeJS และ MongoDB ถูกใช้เป็นฐานข้อมูล Docker Compose ใช้เพื่อกำหนดและเรียกใช้แอปพลิเคชันคอนเทนเนอร์หลายรายการ

เหตุใดจึงต้องใช้นักเทียบท่า

นักเทียบท่าช่วยให้คุณทำให้กระบวนการปรับใช้แอปพลิเคชันเป็นแบบอัตโนมัติ นักพัฒนาไม่จำเป็นต้องติดตั้งโปรแกรมด้วยตัวเองอีกต่อไปหรือจัดการกับความไม่เข้ากันของเวอร์ชันในเครื่องของเขาอีกต่อไป สิ่งที่คุณต้องทำคือติดตั้ง Docker และพิมพ์คำสั่ง 1-2 ลงในคอนโซล วิธีที่สะดวกที่สุดในการทำเช่นนี้คือบน Linux

หากคุณยังไม่ได้เปิดบัญชี IQ Option คลิ๊กที่นี่ กรอกรายละเอียดของคุณและมันจะนำไปยังหน้าเพจที่คล้ายด้านล่างนี้

ตั้ง นักเทียบท่า และ นักเทียบท่าเขียน

โครงสร้างโฟลเดอร์

เราสร้าง 2 โฟลเดอร์สำหรับแอปพลิเคชันไคลเอนต์และเซิร์ฟเวอร์ ไฟล์ที่มีนามสกุล .yml คือการกำหนดค่า Docker Composeโดยที่คอนเทนเนอร์แอปพลิเคชันถูกกำหนดและเชื่อมโยง
นักเทียบท่า-compose.yml:

version: "3"
services:
  mongo:
    container_name: mongo
    hostname: mongo
    image: mongo
    ports:
      - "27017:27017"
  server:
    build: server/
    #command: node ./server.js #здесь можно перезаписать CMD из Dockerfile в /server
    ports:
      - "3000:3000"
    links:
      - mongo
  client:
    build: client/
    #command: http-server ./dist #здесь можно перезаписать CMD из Dockerfile в /client
    network_mode: host
    ports:
      - "8089:8089"
    depends_on:
      - server

เราสร้างบริการ 3 รายการใน Docker: สำหรับ NodeJS, MongoDB และสำหรับบริการคงที่ใน Vue เพิ่มเพื่อเชื่อมต่อไคลเอนต์กับเซิร์ฟเวอร์ ขึ้นอยู่กับเซิร์ฟเวอร์. หากต้องการเชื่อมโยง MongoDB กับเซิร์ฟเวอร์ API ให้ใช้ ลิงก์ mongo. เซิร์ฟเวอร์ ไคลเอนต์ mongo - ชื่อของบริการ

ลูกค้า VueJS

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

FROM node:10
WORKDIR /client
COPY ./package*.json ./
RUN npm install
RUN npm install -g http-server
COPY . .
RUN npm run build
EXPOSE 8081
CMD ["npm", "test:dev"]

โปรดทราบว่า package.json จะถูกคัดลอกและติดตั้งแยกต่างหากจากไฟล์โปรเจ็กต์ที่เหลือ สิ่งนี้ทำเพื่อประสิทธิภาพ ดังนั้นเนื้อหาของโฟลเดอร์ /node_modules จะถูกแคชเมื่อสร้างอีกครั้ง แต่ละบรรทัดคำสั่งจะถูกแคชแยกกัน

ในที่สุด เมื่อคอนเทนเนอร์เริ่มทำงาน คำสั่งก็จะถูกดำเนินการ npm run dev. คำสั่งนี้อธิบายไว้ใน package.json:

"scripts": {
	 "test:dev": "http-server dist -p 8081 -c 1 --push-state"
}

เพื่อเรียกใช้ไฟล์จากโฟลเดอร์ /ดิสท, ติดตั้งทั่วโลก http-serverและในการพึ่งพา dev แพ็คเกจ spa-http-serverเพื่อให้ Vue Router ทำงานได้อย่างถูกต้อง ธง --push-state เปลี่ยนเส้นทางไปยัง index.html มีการเพิ่มแฟล็ก -c ที่มีค่า 1 วินาที http-เซิร์ฟเวอร์ ไม่ได้แคชสคริปต์ นี่คือตัวอย่างการทดสอบ สำหรับโปรเจ็กต์จริง ควรใช้ nginx จะดีกว่า

ในร้านค้า Vuex เราสร้างฟิลด์ apiHost: 'http://localhost:3000'โดยที่พอร์ต NodeJS Api ได้รับการลงทะเบียน ส่วนลูกค้าพร้อมแล้ว ตอนนี้คำขอทั้งหมดจากไคลเอนต์ไปทางด้านหลังไปที่ URL นี้

API เซิร์ฟเวอร์ NodeJS

ในโฟลเดอร์ /server สร้าง เซิร์ฟเวอร์ js และนักเทียบท่าไฟล์:

FROM node:10
WORKDIR /server
COPY ./package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]

В เซิร์ฟเวอร์ js ระบุ URL สำหรับฐานข้อมูล const url = 'mongodb://mongo:27017/';. การอนุญาตคำขอข้ามโดเมนจากไคลเอนต์:

const clientUrl = 'http://localhost:8081';
const corsOptions = {
  origin: clientUrl,
  optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
};
app.use(cors());
app.all('/*', (req, res, next) => {
  res.header('Access-Control-Allow-Origin', clientUrl);
  res.header('Access-Control-Allow-Headers', 'X-Requested-With');
  next();
});
  app.get('/getProducts', cors(corsOptions), (req, res) => {
    products.getContent
      .then(data => res.json(data), err => res.json(err));
  });
  app.get('/getUsers', cors(corsOptions), (req, res) => {
    db.getUsers()
      .then(data => res.json(data), err => res.json(err));
  });

ข้อสรุป

ตอนนี้ไปที่ไดเร็กทอรีโครงการแล้วรัน docker-compose build เพื่อสร้างภาพและ docker-compose up เพื่อเรียกใช้คอนเทนเนอร์ ทีมงานจะยกตู้คอนเทนเนอร์ 3 ตู้ ได้แก่ เซิร์ฟเวอร์ ไคลเอนต์ mongo. สำหรับเซิร์ฟเวอร์ NodeJS คุณสามารถกำหนดค่า hot-reload ได้โดยลิงก์ไปยังโฟลเดอร์ผู้ใช้ และไคลเอนต์ที่อยู่ระหว่างการพัฒนาควรเปิดตัวในเครื่องโดยมีการรีโหลดแบบร้อนและทำงานแยกกัน เซิร์ฟเวอร์ и Mongo. หากต้องการเริ่มบริการแยกต่างหาก เพียงระบุชื่อ docker-compose up client. อย่าลืมทำบ้างเป็นบางครั้ง prune และการลบคอนเทนเนอร์ เครือข่าย และรูปภาพเพื่อเพิ่มพื้นที่ว่างในทรัพยากร

คุณสามารถดูรหัสเต็ม ที่นี่. โครงการยังอยู่ระหว่างการพัฒนา

ที่มา: will.com