前端 finalShell 与 docker 创建 服务连接 部署项目

准备 fianlShell 下载地址 官网下载地址 要哪个下那个, 我的是第一个
在这里插入图片描述

下载后 安装 打开 在这里插入图片描述
在这里插入图片描述

选择 SSH 进行配置

在这里插入图片描述
配置后点击确定即可
在这里插入图片描述

1、yum install -y docker -y 表示不询问,使用默认配置进行安装
检测版本 装最新的
在这里插入图片描述

2、 yum list installed | grep docker 查看yum安装完成文件列表并筛选docker安装信息
3、systemctl status docker 查看docker当前服务状态,active:inactive(dead)未开启,死亡状态
4、systemctl start docker 如果docker处于死亡状态,启动docker
systemctl status docker 再次查看docker状态
5、上述状态为running后即可使用docker
6、更换镜像拉取地址–需要先安装vim yum install -y vim
(/etc/docker/daemon.json 这个文件可以不配置,但如果你要配置那内容一定要按照 JSON格式填写,一定要看仔细了,要不然后边会运行错误一直失败。)
7、进入配置的文件 vi /etc/docker/daemon.json 内容可以直接复制放入,或者看公司需要

 {
	"registry-mirrors": [
	"https://registry.docker-cn.com",
	"https://docker.mirrors.ustc.edu.cn",
	"http://hub-mirror.c.163.com"
	]
}

按 i 可以编辑修改daemon.json,将上面镜像源粘过去,
修改之后,按Esc退出插入insert模式,
按下shift+冒号(shift+:)输入wq!,退出并保存,
按q是退出不保存

8 重新加载配置并重启docker。
systemctl daemon-reload && systemctl restart docker&& systemctl status docker

以上准备工作完成 ,前端就可以创建文件夹拉取项目了。

创建新目录 mkdir my_git_project

(注意如果查不到,可重启下就出来了)

进入目录 cd my_git_project

(注意如果查不到,可重启下就出来了)

克隆Git项目,将URL替换为实际项目的URL git clone https://github.com/username/repository.git

如果你想要在 FinalShell 中执行一个命令,并且希望这个命令在特定的目录下执行,你可以使用 cd 命令来改变当前工作目录,然后再执行你的命令。例如,如果你想要在 FinalShell 中执行 ls 命令,并且希望它在根目录下执行,你可以这样做下面两个命令:

cd /
ls

这将首先把当前工作目录改变到根目录(/),然后执行 ls 命令来列出根目录下的文件和文件夹。
在这里插入图片描述
注意,FinalShell 的命令行界面是基于 SSH 协议的远程命令行界面,所以执行的命令是在远程服务器上执行的,而不是在本地系统上执行的。如果你需要在本地系统上执行命令,请直接在本地的命令行界面中执行。

然后 可以直接 cd /root/xxx 某个新建的文件夹下。之后在克隆项目 。
克隆Git项目,将URL替换为实际项目的URL git clone https:xxxxxxx

进入克隆的仓库目录 cd your_repo_name

查看当前分支 git branch 或者 git branch -a 查看全部分支

在这里插入图片描述
切换命令和git 一样了。
在这里插入图片描述
查看目前的镜像 docker images
在这里插入图片描述
发现此时我们还没有创建自己的镜像服务,一下继续操作。

项目部署
项目部署分为两个模块:docker镜像构建 和 容器运行 大致流程如下:
1准备Dockerfile 2构建Docker镜像 3运行Docker容器 4访问应用程序

操作
1准备 Dockerfile(可以百度下docker 的使用规则,这里也是简单说明)

在这里插入图片描述
在这里插入图片描述
2构建 Docker 镜像(如下, 构建可能时间有点长)
创建镜像 docker buildx build -t ljk-dev51:5.1 --build-arg profile=test .
(时间可能有点长,等会…)
在这里插入图片描述
在这里插入图片描述
查看 是否构建成功了我们的镜像(存在就是成功) docker images
在这里插入图片描述
3运行 Docker 容器 (记得一些常用命令或者百度查看)
在这里插入图片描述在这里插入图片描述
运行本地项目,查看本机映射在这里插入图片描述
可以缩写命令 (name 是创建的容器名称, 最后的是 镜像名称 url是后端的服务地址)
docker run -it -d --restart=always --privileged -e i=123 -e PORT=80 -e GATEWAY_URL=http://172.16.66.131:8090 -u root --name ljk-dev -p 8888:80 ljk-dev51:5.1

查看容器
1 查看正在进行的容器 docker ps
2 查看所有的容器 docker ps -a
3 查看最后一次运行的容器 docker ps -l
4 查看停止的容器 docker ps -f status=exited
在这里插入图片描述

运行成功,即可去http://localhost:8888查看我们部署的前端项目了。
(把http://localhost:8888 替换为我们自己的服务映射地址 http://172.16.66.153:8888)

当然运行时我们也是可以进入容器去操作修改nginx 配置文件的。
进入容器 命令 docker exec -it ljk-dev/bin/sh
重新运行容器(修改后运行) docker restart ljk-dev

4访问应用程序 ( http://172.16.66.153:8888)
在这里插入图片描述

### 前端项目部署的方法教程 前端项目部署涉及多个环节,包括服务器环境配置、工具链搭建以及具体的技术实现。以下是关于前端项目部署的一些核心知识点和方法: #### 1. 部署前的准备工作 在正式开始部署之前,需要准备好必要的资源和工具。这通常包括: - **服务器**:可以选择腾讯云、阿里云或其他服务商提供的虚拟主机或独立服务器[^4]。 - **SSH客户端**:用于连接远程服务器,推荐使用 FinalShell 或者 PuTTY 等工具[^1]。 #### 2. 安装基础环境 为了支持前端项目的正常运行,需先安装 Node.js 和 NPM(Node Package Manager)。对于 CentOS 7 的操作系统,可以通过以下方式完成安装: ```bash curl --silent --location https://rpm.nodesource.com/setup_16.x | sudo bash - sudo yum install -y nodejs ``` 上述命令会自动下载并安装最新版本的 Node.js 及其配套组件[^2]。 #### 3. 构建前端项目 构建过程主要包括以下几个方面: - 删除不必要的开发阶段文件以减少体积; - 使用 Vue CLI 创建生产环境所需的静态资源包; - 替换全局样式中的 `/deep/` 符号以便适配不同框架的要求[^3]。 执行如下脚本来打包应用: ```javascript npm run build ``` #### 4. 设置 Web Server (Nginx) 通过 Nginx 提供服务访问接口是最常见的做法之一。创建一个新的站点配置文件 `default.conf` 并将其放置于合适路径下: ```nginx server { listen 80; server_name localhost; location / { root /path/to/dist; # 修改为你实际编译好的目录位置 index index.html; try_files $uri /index.html; } } ``` 最后重启 nginx 生效更改: ```bash sudo systemctl restart nginx ``` 确保防火墙开放 HTTP 流量。 #### 5. 实现自动化运维——容器化方案 利用 Docker 技术能够进一步简化维护流程,同时增强系统的可移植性和稳定性。编写简单的 Dockerfile 来定义镜像结构: ```dockerfile FROM nginx:alpine COPY ./dist /usr/share/nginx/html/ CMD ["nginx", "-g", "daemon off;"] ``` 之后按照常规步骤制作映像并发布至目标机器上运行即可[^5]。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值