龙炎电商软件/搜索引擎优化要考虑哪些方面

龙炎电商软件,搜索引擎优化要考虑哪些方面,电商网站是什么意思,怎么做网站弹出公告近年来，随着前端技术的发展，前端项目的构建和打包过程变得越来越复杂，占用的资源也越来越多。我有一台云服务器，原本打算使用Docker进行部署，以简化操作流程。然而，只要执行sudo docker-compose -f deploy/…

近年来，随着前端技术的发展，前端项目的构建和打包过程变得越来越复杂，占用的资源也越来越多。我有一台云服务器，原本打算使用Docker进行部署，以简化操作流程。然而，只要执行sudo docker-compose -f deploy/docker-compose/docker-compose.yaml up命令，服务器就直接卡死，CPU占用率飙升至100%，导致我无法正常使用。

经过一番思考和尝试，我决定借助GitHub的CICD功能来解决这个问题。通过利用免费的GitHub的服务器资源，我可以只将打包好的文件部署到我的后台服务器上，简直不要太方便啦！下面详细介绍具体步骤。

背景

在使用Docker进行前端项目和后端服务的部署时，我遇到的问题主要出在资源占用上。由于我的云服务器配置较低，同时执行多个Docker容器的构建和启动指令，导致服务器资源被瞬间耗尽。因此，我决定寻找一种更高效的方式来完成前端项目的构建和打包，而无需占用本地服务器的大量资源。GitHub的CICD功能恰好可以满足这一需求，它提供了一个强大的云端构建环境，可以轻松地完成项目的构建和打包工作。
在这里插入图片描述

准备工作

  1. GitHub账户：确保你有一个GitHub账户，并且已经创建了一个仓库来存放你的前端项目代码。
  2. 部署服务器：准备好你的部署服务器，确保服务器可以访问GitHub，并且已经做好了相应的部署准备工作。
  3. SSH密钥：为GitHub配置SSH密钥，以便能够通过SSH连接到你的部署服务器。

步骤

1. 编写Dockerfile

首先，确保你的前端项目有一个Dockerfile，用于构建前端项目的镜像。以下是一个简单的Dockerfile示例：

# 使用官方Node镜像作为构建环境
FROM node:20-slim AS build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build# 使用官方Nginx镜像作为运行环境
FROM nginx:alpine AS production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

2. 创建GitHub Actions Workflow

在GitHub仓库中创建一个.github/workflows文件夹，然后在文件夹中创建一个YAML文件，例如ci-cd.yml。这个文件将定义GitHub Actions的工作流程。

name: CI/CD for Frontend Projecton:push:branches:- mainjobs:build:runs-on: ubuntu-lateststeps:- name: Checkout codeuses: actions/checkout@v4- name: Set up Node.jsuses: actions/setup-node@v4with:node-version: '20'- name: Install dependenciesrun: npm install- name: Run build scriptrun: npm run build- name: Upload build artifactsuses: actions/upload-artifact@v4with:name: frontend-buildpath: ./distdeploy:needs: buildruns-on: ubuntu-lateststeps:- name: Download build artifactsuses: actions/download-artifact@v4with:name: frontend-buildpath: ./dist- name: Deploy to serveruses: appleboy/scp-action@masterwith:host: ${{ secrets.SERVER_HOST }}username: ${{ secrets.SERVER_USERNAME }}password: ${{ secrets.SERVER_PASSWORD }}port: ${{ secrets.SERVER_PORT }}source: "dist"target: "/root/build"

3. 配置GitHub Secrets

在GitHub仓库设置中，配置以下Secrets：

  • SERVER_HOST：你的服务器IP地址
  • SERVER_USERNAME：你的服务器用户名
  • SERVER_PASSWORD：你的服务器密码
  • SERVER_PORT：你的服务器SSH端口（默认为22）

这些Secrets用于在GitHub Actions Workflow中安全地存储和使用敏感信息，如服务器的登录凭证。

4. 配置服务器

确保服务器已经配置好Nginx，并且可以通过SSH访问。将前端项目的构建输出目录（例如dist）上传到服务器后，Nginx需要配置为指向这个目录以提供静态文件服务。

5. 下载构件

当工作流运行完成后，构建好的前端文件会被上传为构件。可以在 GitHub 项目的 Actions 标签下找到对应的运行记录，并下载构件。具体操作如下：

  1. 打开GitHub 项目页面，在左侧菜单中点击 Actions。
  2. 找到触发的构建工作流，点击对应的运行记录。
  3. 在运行记录页面的右上角，会看到 Artifacts 标签，点击它。
  4. 点击上传的构件名称（如 frontend-build），就可以开始下载。

6. 自动化部署到后台服务器

为了进一步提升效率，可以借助 scp 或 rsync 将构件从 GitHub Actions 自动部署到云服务器。这里以 scp 为例，需要配置 SSH 密钥，并在 GitHub Secrets 中设置服务器的访问凭据。

配置 SSH 密钥
  1. 在本地生成 SSH 密钥对（如果还没有的话），使用命令 ssh-keygen -t rsa -b 4096 -C "your_email@example.com"。
  2. 将生成的公钥添加到云服务器的 ~/.ssh/authorized_keys 文件中。
  3. 将私钥添加到 GitHub 项目的 Secrets 中，设置为 SSH_PRIVATE_KEY。
修改工作流文件以支持自动部署

在build.yml 文件中添加部署步骤：

- name: Install SSH Clientuses: webfactory/ssh-agent@v0.5.4with:ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}- name: Deploy to Remote Serverrun: |scp -r ./build user@your_server_ip:/path/to/deploy

确保将上述命令中的 user、your_server_ip 和 /path/to/deploy 替换为你的服务器用户名、服务器 IP 地址和你想部署到的路径。
在这里插入图片描述

为了使上述命令能够顺利执行，需要在GitHub仓库的“Settings” -> “Secrets”中添加SSH_PRIVATE_KEY和服务器的IP地址等信息，将本地生成的私钥内容复制到该Secret中。
在这里插入图片描述

总结需要确认以下三点：

  • 确认公钥已经正确添加到云服务器的~/.ssh/authorized_keys文件中。
  • 在GitHub仓库的“Settings” -> “Secrets”中添加SSH_PRIVATE_KEY。将本地生成的私钥内容复制到该Secret中。
  • 添加SERVER_IP，将你的云服务器的IP地址添加到该Secret中。

通过上述步骤，利用 GitHub Actions 的免费 CI/CD 资源编译打包前端项目，并将结果自动部署到你的云服务器上，无需占用本地服务器的资源。这样不仅提高了效率，还简化了部署流程，太美啦。

注: 在使用 GitHub Actions 实现 CI/CD 自动化部署时，将生成的公钥添加到云服务器的 ~/.ssh/authorized_keys 文件中是推荐的做法，这样可以实现无密码的自动化部署。这样 GitHub Actions 在执行部署时就可以使用私钥进行身份验证，而无需每次都输入密码。这不仅提高了部署的效率，也增强了安全性，因为私钥的存储和使用可以被更好地控制。
在这里插入图片描述

结论

通过GitHub的CICD功能，我们可以利用其强大的云端构建环境来完成前端项目的构建和打包工作，而无需占用本地服务器的大量资源。这样不仅可以提高构建效率，还可以降低服务器的负担，使我们的开发和部署过程更加流畅。

附：我的Dockerfile:

# 如果需要用 cicd ，请设置环境变量：
# variables:
#     DOCKER_BUILDKIT: 1FROM node:20-slim AS base
ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable
COPY . /app
WORKDIR /appFROM base AS prod-deps
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prodFROM base AS build
COPY --from=prod-deps /app/node_modules /app/node_modules
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install && pnpm run buildFROM nginx:alpine
LABEL MAINTAINER="bypanghu@163.com"
COPY --from=base  /app/.docker-compose/nginx/conf.d/my.conf /etc/nginx/conf.d/my.conf
COPY --from=build  /app/dist /usr/share/nginx/html
RUN ls -al /usr/share/nginx/html

我的docker-compose.yaml文件:

version: "3"# 声明一个名为network的networks,subnet为network的子网地址,默认网关是177.7.0.1
networks:network:ipam:driver: defaultconfig:- subnet: '177.7.0.0/16'# 设置mysql，redis持久化保存
volumes:mysql:redis:services:web:build:context: ../../webdockerfile: ./Dockerfilecontainer_name: gva-webrestart: alwaysports:- '8080:8080'depends_on:- servercommand: [ 'nginx-debug', '-g', 'daemon off;' ]networks:network:ipv4_address: 177.7.0.11server:build:context: ../../serverdockerfile: ./Dockerfilecontainer_name: gva-serverrestart: alwaysports:- '8888:8888'depends_on:mysql:condition: service_healthyredis:condition: service_healthylinks:- mysql- redisnetworks:network:ipv4_address: 177.7.0.12mysql:image: mysql:8.0.21       # 如果您是 arm64 架构：如 MacOS 的 M1，请修改镜像为 image: mysql/mysql-server:8.0.21container_name: gva-mysqlcommand: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci #设置utf8字符集restart: alwaysports:- "13306:3306"  # host物理直接映射端口为13306environment:#MYSQL_ROOT_PASSWORD: 'Aa@6447985' # root管理员用户密码MYSQL_DATABASE: 'qmPlus' # 初始化启动时要创建的数据库的名称MYSQL_USER: 'gva'MYSQL_PASSWORD: 'Aa@6447985'healthcheck:test: ["CMD", "mysqladmin", "ping", "-h", "localhost", "-u", "gva", "-pAa@6447985"]interval: 10stimeout: 5sretries: 3volumes:- mysql:/var/lib/mysqlnetworks:network:ipv4_address: 177.7.0.13redis:image: redis:6.0.6container_name: gva-redis # 容器名restart: alwaysports:- '16379:6379'healthcheck:test: ["CMD-SHELL", "redis-cli ping | grep PONG || exit 1"]interval: 10stimeout: 5sretries: 3volumes:- redis:/datanetworks:network:ipv4_address: 177.7.0.14

最后，附上我的cicd脚本代码（测试ok,完全可用）：
.github\workflows\ci-cd.yml

name: CI-CD Build and Deploy Frontendon:push:branches: [ main ]pull_request:branches: [ main ]jobs:build:runs-on: ubuntu-lateststrategy:matrix:node-version: [20.x]steps:- uses: actions/checkout@v4- name: set Node.js versionuses: actions/setup-node@v4with:node-version: ${{ matrix.node-version }}- name: cache Node.js moduleuses: actions/cache@v4with:path: ~/.npmkey: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}restore-keys: |${{ runner.os }}-node-- name: install dependenciesrun: npm install- name: Create build directoryrun: mkdir -p ./dist- name: Build projectrun: npm run build- name: upload Artifactuses: actions/upload-artifact@v4with:name: build resultpath: ./dist- name: Install SSH clientrun: sudo apt-get install -y openssh-client- name: Create a text file for testingrun: touch ./dist/text.txt- name: Set up SSH keysrun: |mkdir -p ~/.sshecho "$SSH_PRIVATE_KEY" | tr -d '\r' > ~/.ssh/id_ed25519chmod 600 ~/.ssh/id_ed25519ssh-keyscan -t ed25519 120.27.146.247 >> ~/.ssh/known_hostsenv:SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}- name: Deploy to Remote Serverrun: |scp -r ./dist root@120.27.146.247:/root/buildenv:SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}

参考资料

  • GitHub Actions
  • Docker Compose
  • SCP Action

注：文中提到的docker-compose.yaml内容，主要用于本地开发环境的构建和部署，可以按照实际需求进行调整。在CICD流程中，我们主要是利用Docker来构建前端项目的镜像，然后将构建好的静态文件通过SCP方式上传至部署服务器。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/70455.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Python之装饰器二 带参数的装饰器

Python之装饰器二 带参数的装饰器

前言一、带参数的装饰器二、在装饰器里面传入参数总结 前言 暂无 一、带参数的装饰器 我们知道，不带参数的装饰其实就是在函数的头上添加装饰器时放一个名称，这种写法就默认了装饰器函数调的是被装饰函数自己，换句话说就是，大家…
阅读更多...
Linux文件系统与磁盘存储

Linux文件系统与磁盘存储

目录 一、磁盘基础 二、磁盘的结构与工作原理 1. 磁盘的物理结构 2. 磁盘的工作原理 🍒磁道与扇区 ： 🍇磁盘如何找数据？ 3. 磁盘的应用场景 🌵个人电脑 🌻公司服务器 4. 逻辑块地址（LB…
阅读更多...
进程线程的创建、退出、回收

进程线程的创建、退出、回收

1. 进程相关知识点 1.1 进程创建 fork()： 功能：创建一个子进程。 返回值： 父进程中返回子进程的 PID。 子进程中返回 0。 失败返回 -1。 特点：子进程是父进程的副本，拥有独立的内存空间。 vfork()：…
阅读更多...
解耦的艺术_应用架构中的解耦

解耦的艺术_应用架构中的解耦

文章目录 Pre解耦的技术演化应用架构中的解耦小结 Pre 解耦的艺术_通过DPI依赖倒置实现解耦 解耦的艺术_通过中间层映射实现解耦 解耦的技术演化 技术的演化史，也是一部解耦的历史。从最初的面向对象编程（OOP）到Spring框架的依赖注入&…
阅读更多...
机器学习实战(5)：决策树与随机森林——直观的分类与回归方法

机器学习实战(5)：决策树与随机森林——直观的分类与回归方法

第5集：决策树与随机森林——直观的分类与回归方法 在机器学习中，决策树（Decision Tree） 和 随机森林（Random Forest） 是两种直观且强大的算法，广泛应用于分类和回归任务。决策树通过一系列规则…
阅读更多...
网站中内嵌腾讯元宝用deepseek

网站中内嵌腾讯元宝用deepseek

网站中内嵌元宝deepseek <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BING搜</title> <meta name="description" content="不用学习就G搜索高级语法，即选即用…
阅读更多...
draw.io：开源款白板/图表绘制利器

draw.io：开源款白板/图表绘制利器

在工作和学习中&#xff0c;我们常常需要绘制各种图表&#xff0c;例如流程图、思维导图、网络拓扑图等等。一款功能强大且易于上手的图表绘制工具可以极大地提高我们的效率。今天&#xff0c;我要向大家推荐一款开源免费的图表绘制工具—— draw.io&#xff0c;并手把手教你如…
阅读更多...
基于eBPF的全栈可观测性系统：重新定义云原生环境诊断范式

基于eBPF的全栈可观测性系统：重新定义云原生环境诊断范式

引言&#xff1a;突破传统APM的性能桎梏 某头部电商平台采用eBPF重构可观测体系后&#xff0c;生产环境指标采集性能提升327倍&#xff1a;百万QPS场景下传统代理模式CPU占用达63%&#xff0c;而eBPF直采方案仅消耗0.9%内核资源。核心业务的全链路追踪时延从900μs降至18μs&a…
阅读更多...
图解MySQL【日志】——Binlog

图解MySQL【日志】——Binlog

Binlog&#xff08;Binary Log&#xff0c;归档日志&#xff09; 为什么需要 Binlog&#xff1f; Binlog 是 MySQL 中的二进制日志&#xff0c;用于记录数据库的所有写操作&#xff08;INSERT、UPDATE、DELETE 等&#xff09; 1. 主从复制 作用&#xff1a;是 MySQL 主从复…
阅读更多...
进程的介绍--进程状态/切换

进程的介绍--进程状态/切换

1.冯 • 诺依曼体系结构 1.1 体系结构 冯•诺依曼结构也称普林斯顿结构&#xff0c;是一种将程序指令存储器和数据存储器合并在一起的存储器结构。数学家冯•诺依曼提出了计算机制造的三个基本原则&#xff0c;即采用二进制逻辑、程序存储执行以及计算机由五个部分组成&#x…
阅读更多...
Python开源项目月排行 2025年1月

Python开源项目月排行 2025年1月

#2025年1月2025年2月2日1DeepSeek-R1当红炸子鸡&#xff0c;国人之骄傲&#xff01;项目于 2025 年 1 月 20 日正式发布。早期的预览版&#xff08;如 DeepSeek-R1-Lite-Preview&#xff09;则在 2024 年 11 月 20 日亮相。 用途&#xff1a;DeepSeek-R1 是一个开源的推理模型&…
阅读更多...
yolov8改进：efficientViT替换YOLOV8主干网络结构

yolov8改进：efficientViT替换YOLOV8主干网络结构

6.1 efficientViT替换YOLOV8主干网络结构 6.1.1 effivientvit EfficientViT 的架构特点 EfficientViT 是一种结合了 Transformer 和卷积网络优点的轻量级模型&#xff0c;它的设计目标是高效地提取图像特征&#xff0c;同时减少计算量。以下是它的关键组成部分&#xff1a; …
阅读更多...
Android Studio安装配置及运行

Android Studio安装配置及运行

一、下载Android Studio 官网下载&#xff1a;下载 Android Studio 和应用工具 - Android 开发者 | Android Developers 跳转到下载界面&#xff0c;选择同意条款&#xff0c;并点击下载&#xff0c;如图&#xff1a; 二、详细安装 双击下载的文件 三、配置Android Studio …
阅读更多...
OpenHarmony分布式数据管理子系统

OpenHarmony分布式数据管理子系统

OpenHarmony分布式数据管理子系统 简介 目录 组件说明 分布式数据对象数据共享分布式数据服务Key-Value数据库首选项关系型数据库标准数据化通路 相关仓 简介 子系统介绍 分布式数据管理子系统支持单设备的各种结构化数据的持久化&#xff0c;以及跨设备之间数据的同步、…
阅读更多...
智能算法如何优化数字内容体验的个性化推荐效果

智能算法如何优化数字内容体验的个性化推荐效果

内容概要 在数字内容体验的优化过程中&#xff0c;个性化推荐系统的核心价值在于通过数据驱动的技术手段&#xff0c;将用户需求与内容资源进行高效匹配。系统首先基于用户行为轨迹分析&#xff0c;捕捉包括点击频次、停留时长、交互路径等关键指标&#xff0c;形成对用户兴趣…
阅读更多...
超简单理解KMP算法（最长公共前后缀next数组、合并主子串、子串偏移法）

超简单理解KMP算法（最长公共前后缀next数组、合并主子串、子串偏移法）

KMP算法理解 最长公共前后缀next合并主子串子串偏移 参考b站&#xff1a;子串偏移、合并主子串 最长公共前后缀next 这个概念是一个trick&#xff0c;帮助我们记录遍历了一遍的数组的相似特性&#xff0c;想出来确实很nb&#xff0c;我也不理解逻辑是怎么想出来的。 字符串的…
阅读更多...
github 怎么创建一个私有repository 并从另外一台电脑拉取下来更新

github 怎么创建一个私有repository 并从另外一台电脑拉取下来更新

1.github上新建一个repository 设置为private tips删除在这 点setting 然后往下拖动 会有个这里是用来删项目的 2.另外 一台电脑拉取这个repository的时候 需要配置 一个ssh key 这个key的内容生成参考本地电脑的生成 然后在这配置 2.1 生成 SSH 密钥&#xff08;如果还没有…
阅读更多...
LangChain 技术入门指南：探索语言模型的无限可能

LangChain 技术入门指南：探索语言模型的无限可能

在当今的技术领域&#xff0c;LangChain 正逐渐崭露头角&#xff0c;成为开发语言模型应用的强大工具。如果你渴望深入了解并掌握这一技术&#xff0c;那么就跟随本文一起开启 LangChain 的入门之旅吧&#xff01; (后续将持续输出关于LangChain的技术文章,有兴趣的同学可以关注…
阅读更多...
小米手环7屏幕脱胶维修

小米手环7屏幕脱胶维修

前言 本文仅用于记录维修过程&#xff0c;如有不对请指出&#xff0c;非常感谢&#xff01; 参考视频 https://www.bilibili.com/video/BV1wV4y1H71N/?vd_sourcec887ed704029330114b8b207d8164686 胶水链接 常见的T-8000胶水&#xff0c;随便挑了一个送皮筋的 https://d…
阅读更多...
自注意力机制和CNN的区别

自注意力机制和CNN的区别

CNN&#xff1a;一种只能在固定感受野范围内进行关注的自注意力机制。​CNN是自注意力的简化版本。自注意力&#xff1a;具有可学习感受野的CNN。自注意力是CNN的复杂形态&#xff0c;是更灵活的CNN&#xff0c;经过某些设计就可以变为CNN。 越灵活、越大的模型&#xff0c;需要…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023