云服务器Linux通过docker搭建前端项目开发环境(vue3)

准备工作

1. 云服务器+linux（我用的ubuntu20.04）
2. docker
3. vscode + 远程资源管理器 + 插件（docker ）
4. 运气

买一个云服务器

买便宜的！！！淘宝随便找，最好找个最低cpu 2核的，用一个你熟悉的linux发行版，最好是稳定版，不折腾。

安装docker启动

1. 安装相关软件包

​ 在终端中使用 apt（Ubuntu、Debian）或 yum（CentOS）安装相关的软件包以允许使用仓库通过 HTTPS 安装软件包：

• Ubuntu 或 Debian：

  sudo apt update
  sudo apt install apt-transport-https ca-certificates curl software-properties-common

• CentOS：

  sudo yum install -y yum-utils device-mapper-persistent-data lvm2

​ 安装相关软件包：这些软件包是为了允许您使用 HTTPS 协议从仓库下载和安装软件包。这些软件包包括 apt-transport-https、ca-certificates、curl 和 software-properties-common（对于 Ubuntu 和 Debian）以及 yum-utils、device-mapper-persistent-data 和 lvm2（对于 CentOS）。

2. 添加 Docker 的官方 GPG 密钥

Ubuntu

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg

或 Debian：

sudo curl -fsSL https://download.docker.com/linux/debian/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg

CentOS 用户可以使用以下命令：

sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo

​ 添加 Docker 的官方 GPG 密钥：公共 GPG 密钥用于验证从 Docker 仓库下载的软件包的真实性和完整性。

3. 添加 Docker 的软件包仓库

• Ubuntu：

  echo "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

• Debian：

  echo "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/debian $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

• CentOS：无需执行此步骤。

​ 添加 Docker 的软件包仓库：通过这个步骤，您将向系统添加 Docker 的官方软件包仓库，以便可以通过您的包管理器（apt、yum）来安装 Docker。这个步骤会设置一个存储库文件，指向 Docker 的软件包

4. 安装 Docker

• Ubuntu 或 Debian：

  sudo apt update
  sudo apt install docker-ce docker-ce-cli containerd.io

• CentOS：

  sudo yum install docker-ce docker-ce-cli containerd.io

​ 安装 Docker：通过这个步骤，您将使用您的包管理器（apt、yum）来安装 Docker 引擎及相关工具。这些软件包包括 docker-ce、docker-ce-cli 和 containerd.io。

5. 启动 Docker 服务

sudo systemctl start docker

启动 Docker 服务：这个步骤是为了启动 Docker 服务，以便可以使用 Docker 命令来管理和运行容器

6. 验证 Docker 安装

sudo docker run hello-world

如果一切正常，您将看到一个 "Hello from Docker!" 的消息。

现在，您已经成功在 Linux 上安装了 Docker。请注意，上述步骤可能会有所不同，具体取决于您所使用的 Linux 发行版和版本。建议您参考 Docker 官方文档以获取适用于您系统的具体安装方法。

创建镜像运行容器

在云服务器工作空间(随便找个合适的项目文件夹)

​ 1. 创建一个 Dockerfile：使用文本编辑器在您的服务器上创建一个名为 Dockerfile 的文件，并在其中添加以下内容

FROM node:18
# 安装 Git 和 PNPM 还有vue@latest
RUN apt-get update && apt-get install -y git \
  && npm install -g pnpm \
  && npm init vue@latest
# 创建工作目录
WORKDIR /app
# 暴露端口 8080，如果您的项目使用其他端口，请相应修改
EXPOSE 8080

上述 Dockerfile 使用官方的 Node.js 镜像作为基础镜像，并在其中安装了最新版本的 Vue CLI。同时还指定了容器使用的工作目录，并暴露了端口 8080（您可以根据需要修改端口号）。

​ 2. 构建 Docker 镜像：在 Dockerfile 所在的目录中，使用以下命令构建 Docker 镜像：

docker build -t vue3-dev .

-t 参数指定了镜像的名称，vue3-dev 是您自定义的镜像名称，. 表示当前目录。

​ 3. 运行容器：使用以下命令在容器中运行 Vue 3 的开发环境：

docker run -it -p 8080:8080 -v /path/to/your/app:/app vue3-dev

在上述命令中，-it 参数表示使用交互式终端以便您可以在容器中交互操作，-p 参数映射容器的端口到主机的端口（这里将容器的 8080 端口映射到主机的 8080 端口），-v 参数将主机的项目目录挂载到容器的 /app 目录中。

请将 /path/to/your/app 替换为您自己的项目目录的路径。

​ 4. 进入容器中：一旦容器启动，您可以使用以下命令进入容器中：

docker exec -it 容器ID /bin/bash

容器ID 可以通过运行 docker ps 命令来获取，之后您将进入容器的交互式终端。

现在，您已经在 Linux 服务器上搭建了一个包含 Vue 3 开发环境的 Docker 容器。您可以在容器中执行 Vue 相关的命令，例如创建新的 Vue 项目或运行现有的 Vue 项目。

vscode开发

​ 通过vscode连接容器，需要插件Docker可以管理云服务器docker容器，启动vscode的远程资源管理器切换到开发容器。

​ 进入后找到自己的工作目录app，在里面git clone自己的项目，然后运行，会在端口显示自动转发。

​ 最后可以在本地浏览器访问到127.0.0.1:5173

最后你需要一点运气，中间没有什么稀奇古怪的问题出现。