使用 Docker 部署 Nuxt.js 应用程序

 

来源：https://medium.com/@jkpeyi/deploying-a-nuxt-js-application-with-docker-69bf822c066d

 

nextjs的话需要.next文件和node_modules ，所以要下面的build

FROM node:18

WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .

RUN npm run build  # 这一步很重要

EXPOSE 3000

CMD ["npm", "start"]

 

nuxt 可以不在docker  build 

When developing a Nuxt.js application, it’s essential to be able to deploy it easily and reproducibly. In this article, we will explore how to use Docker to deploy a Nuxt.js application using a docker-compose file and a Dockerfile.
在开发Nuxt.js应用程序时，必须能够轻松且可重复地部署它。在本文中，我们将探讨如何使用 Docker 通过 docker-compose 文件和 Dockerfile 部署 Nuxt.js 应用程序。

Prerequisites: 先决条件：

• Docker and docker-compose installed on your machine.
  Docker 和 docker-compose 安装在您的计算机上。

 

Step 1: Creating the docker-compose.yml file The docker-compose.yml file is used to define and configure the services for your application. In our case, we will have a service named “my-nuxt-app” for our Nuxt.js application. Here’s an example content for this file:
步骤 1：创建docker-compose.yml文件 docker-compose.yml 文件用于定义和配置应用程序的服务。在我们的例子中，我们将为Nuxt.js应用程序提供一个名为“my-nuxt-app”的服务。下面是此文件的示例内容：

version: '3.3'
services:
  my-nuxt-app:
    build: .
    container_name: my-nuxt-app
    restart: unless-stopped
    ports:
      - 3000:3000
  

Step 2: Creating the Dockerfile The Dockerfile is used to build the Docker image of our application. Here’s an example content for the Dockerfile:
第 2 步：创建 Dockerfile Dockerfile 用于构建应用程序的 Docker 映像。下面是 Dockerfile 的示例内容：

PS: You can chose any version of nodejs that suits you.
PS：你可以选择任何适合你的nodejs版本。

FROM node:18.14.2

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 3000

RUN npm run build
CMD [ "npm", "run", "start" ]

Step 3: Configuring the package.json Make sure you have the proper configuration in your package.json to correctly run the Nuxt.js application inside the Docker container. Here’s an example excerpt of what it might look like:
步骤 3：配置package.json 请确保package.json中具有正确的配置，以便在 Docker 容器中正确运行 Nuxt.js 应用程序。下面是它的示例摘录：

"scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "start": "node .output/server/index.mjs"
},

Conclusion: In this article, we’ve learned how to deploy a Nuxt.js application using Docker. By utilizing a docker-compose file and a Dockerfile, we can easily package and deploy our application in a containerized environment. Docker provides a reproducible and scalable solution for deploying Nuxt.js applications, ensuring consistency across different environments.
结论：在本文中，我们学习了如何使用 Docker 部署 Nuxt.js 应用程序。通过使用 docker-compose 文件和 Dockerfile，我们可以轻松地在容器化环境中打包和部署我们的应用程序。Docker 为部署Nuxt.js应用程序提供了可重现和可扩展的解决方案，确保了不同环境之间的一致性。

One important thing to note is the “start” script in the package.json file. This script plays a crucial role in starting our Nuxt.js application within the Docker container. Make sure to configure it correctly according to your project’s requirements. It’s responsible for launching the server and making your application accessible.
需要注意的一件重要事情是 package.json 文件中的“start”脚本。此脚本在 Docker 容器中启动Nuxt.js应用程序时起着至关重要的作用。确保根据项目的要求正确配置它。它负责启动服务器并使应用程序可访问。

I hope this article helps you in your journey of deploying Nuxt.js applications with Docker!
我希望本文对您使用 Docker 部署Nuxt.js应用程序的旅程有所帮助！

Note: Don’t forget to adapt the code and instructions to fit your specific project requirements and configurations.
注意：不要忘记调整代码和说明以适应您的特定项目要求和配置。

 

 

 

 

然后我们打开docker

 然后跑docker-compose up

 

最后我们打开浏览器的3000端口就好了

 

 

 

 

 如果你要改成3002，你就这样，修改之前记得先把Containers的删了，然后再删除Images的。除非你是第一次编译