使用Docker部署前端项目实战教程,该踩的坑我都帮你踩了!(上)

简介: 使用Docker部署前端项目实战教程,该踩的坑我都帮你踩了!

前置工作

1、需要准备的东西

一台Centos服务器并连接

20210824232144111.png

我这是演示用的垃圾云,建议大家上阿里云、腾讯云等。

2、连接云服务器

连接服务器看文章: https://blog.csdn.net/qq_32442973/article/details/119840447


安装Docker环境

Docker有两个分支版本:Docker CEDocker EE,即社区版和企业版。本教程基于CentOS 7安装Docker CE。

1、安装Docker的依赖库。

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

2、添加Docker CE的软件源信息。

docker官方源:

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

或者使用国内阿里云源(安装太慢/无法安装可以考虑用这个):

sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-c

出现以下内容则代表设置源成功:

20210826203130758.png

3、安装Docker CE。

可以查看所有仓库中所有docker版本,并选择特定版本安装

yum list docker-ce --showduplicates | sort -r

20210826205233442.png

下面是安装方式

sudo yum install docker-ce #由于repo中默认只开启stable仓库,故这里安装的是最新稳定版 3:20.10.8-3.el7
sudo yum install <FQPN>  # 例如:sudo yum install docker-ce-17.12.0.ce

我用第一种安装方式。

4、启动Docker服务。

1. sudo systemctl start docker #  启动docker
2. sudo systemctl enable docker # 设置开机自启

20210827200029869.png

若不设置开机自启,那么一但服务器宕机或者重启,就得手动输命令重新启动,很麻烦。


准备Dockerfile并部署项目(构建新的业务镜像)

1、准备nginx.conf.template、Dockerfile、dist(前端项目build后的包)


为了方便管理我们统一放在目录frontend-docker下,以下代码段为步骤:

# 第一步
cd /
# 第二步 创建文件夹
mkdir frontend-docker
# 第三步
cd frontend-docker
# 第四步 创建nginx.conf.template并编辑好保存
vi nginx.conf.template #打开编辑贴上下面的文件内容再按 esc 然后 : wq保存
# 第五步 创建Dockerfile文件并编辑好保存
vi Dockerfile #打开编辑贴上下面的文件内容再按 esc 然后 : wq保存
# 第五步 上传vue项目build后的dist文件夹


nginx.conf.template 文件内容

user nginx;
#user  nobody;
worker_processes  1;
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
#pid        logs/nginx.pid;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';
    #access_log  logs/access.log  main;
    sendfile        on;
    #tcp_nopush     on;
    #keepalive_timeout  0;
    keepalive_timeout  65;
    #gzip  on;
    server {
        listen       80;
        server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            root   /dist;
      #try_files $uri /index.html; #解决路由重定向跳转 404 页面配置
            index  index.html index.htm;
        }
        #error_page  404              /404.html;
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;
    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}
    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;
    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;
    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;
    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;
    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}
}

Dockerfile文件内容 (业务镜像构建流程

FROM nginx:latest
RUN mkdir /dist
COPY ./dist /dist
COPY ./nginx.conf.template /
CMD envsubst < /nginx.conf.template > /etc/nginx/nginx.conf \
  && cat /etc/nginx/nginx.conf \
  && nginx -g 'daemon off;'

该文件里主要是安装了nginx,复制dist、nginx.conf.template、启动nginx的步骤。

20210827202701284.png

注意:你复制粘贴时可能会无意丢掉头部几个单词,注意检查文件内容是否一致。


相关文章
|
4天前
|
Ubuntu Linux 开发工具
docker 是什么?docker初认识之如何部署docker-优雅草后续将会把产品发布部署至docker容器中-因此会出相关系列文章-优雅草央千澈
Docker 是一个开源的容器化平台,允许开发者将应用程序及其依赖项打包成标准化单元(容器),确保在任何支持 Docker 的操作系统上一致运行。容器共享主机内核,提供轻量级、高效的执行环境。本文介绍如何在 Ubuntu 上安装 Docker,并通过简单步骤验证安装成功。后续文章将探讨使用 Docker 部署开源项目。优雅草央千澈 源、安装 Docker 包、验证安装 - 适用场景:开发、测试、生产环境 通过以上步骤,您可以在 Ubuntu 系统上成功安装并运行 Docker,为后续的应用部署打下基础。
docker 是什么?docker初认识之如何部署docker-优雅草后续将会把产品发布部署至docker容器中-因此会出相关系列文章-优雅草央千澈
|
1月前
|
Java 应用服务中间件 Docker
将基于 Spring 的 WAR 应用程序部署到 Docker:详尽指南
将基于 Spring 的 WAR 应用程序部署到 Docker:详尽指南
35 2
|
2月前
|
Java Linux Docker
什么是 Docker?如何将 Spring Boot 应用程序部署到 Docker?
什么是 Docker?如何将 Spring Boot 应用程序部署到 Docker?
49 3
|
2月前
|
持续交付 开发者 Docker
掌握Docker容器化技术,加速软件开发与部署
掌握Docker容器化技术,加速软件开发与部署
55 0
|
2月前
|
缓存 监控 前端开发
前端性能优化:从代码到部署的全面策略
前端性能优化:从代码到部署的全面策略
|
3月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
205 2
|
3月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
58 0
|
3月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
|
3月前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
|
3月前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
142 1

热门文章

最新文章