项目打包
npm run build
如果出现以下这些是提示版本过期，由于是自己部署着玩所以可以先不用理会
> sq_airbnb@0.1.0 build
> craco build
Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run:
npx update-browserslist-db@latest
Why you should do it regularly: <https://github.com/browserslist/update-db#readme>
Browserslist: caniuse-lite is outdated. Please run:
npx update-browserslist-db@latest
Why you should do it regularly: <https://github.com/browserslist/update-db#readme>
Compiled with warnings.
创建Dockerfile
在项目的根目录下(也就是package.json的同级下)创建一个名为Dockerfile 的文件。并将内容为
# 使用轻量级的 Nginx 作为基础镜像
FROM nginx:alpine
# 将前端的静态文件复制到 Nginx 的默认目录
COPY ./build /usr/share/nginx/html
# 暴露端口
EXPOSE 80
# 启动 Nginx 服务
CMD ["nginx", "-g", "daemon off;"]
创建.dockerignore
继续在根目录下创建名为.dockerignore 的文件，此文件的作用是防止不必要的文件和文件夹被复制到Docker镜像中，从而减小镜像体积。
构建Docker镜像
运行docker build -t my-frontend-app . 如果出现网络问题的话切换一下🪜
运行Docker容器
docker run -d -p 8080:80 my-frontend-app
该命令将本地8080端口映射到80端口。此时可以通过http://localhost:8080 地址来访问前端项目了
登录Docker
docker login 由于我用的是谷歌账号登录，所以直接在桌面端应用登录，然后直接在终端输入代码就可以登录
为镜像打标签
这里大的标签为：my-fontend-app
docker tag my-frontend-app <your-dockerhub-username>/my-frontend-app:latest
例如我的用户名为treacherousz 就为
docker tag my-frontend-app treacherousz/my-frontend-app:latest
推送到Docker Hub
docker push <your-dockerhub-username>/my-frontend-app:latest
完成
此时就完成了(如果你的访问是任何人的话), 就可以从其他机器上访问这个镜像了 命令为
docker pull <your-dockerhub-username>/my-frontend-app:latest
运行为
docker run -d -p 8080:80 <your-dockerhub-username>/my-frontend-app:latest
其他docker命令
查找当前运行的容器：docker ps
停止容器：docker stop <CONTAINER_ID> 这个id为上面通过ps命令得到
停止所有容器：docker stop $(docker ps -q)
