携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第23天，点击查看活动详情。

前言：大家好，我是 那个曾经的少年回来了。10年前我也曾经年轻过，如今已步入被淘汰的年龄，但如下幡然醒悟，所以活在当下，每天努力一点点，来看看2024年的时候自己会是什么样子吧，2024年的前端又会是什么样子，而2024年的中国乃至全球又会变成什么样子，如果你也有想法，那还不赶紧行动起来。期待是美好的，但是更重要的是要为美好而为之奋斗付诸于行动。

opensuse 通过zypper可以方便的进行软件管理，类似centos的yum 软件。

安装nginx

// 查找nginx
zypper search nginx

// 通过zypper安装nginx
zypper install nginx

// 查看nginx是否安装成功,安装成功则出现版本相关信息
nginx -v

设置nginx服务自动启动

// 设置nginx开机自动启动
systemctl enable nginx

// 取消开机自动启动
systemctl disable nginx

// 启动nginx服务
systemctl start nginx

// 停止nginx服务
systemctl stop nginx

// 查看nginx服务的状态
systemctl status nginx

//修改nginx配置文件等，重新载入
nginx -s reload

在/etc/nginx/conf.d文件夹下新建一个html.conf

server {
    ## 端口
    listen 88;
    ##  前端项目打包后的路径
    root /usr/local/qiankun/blog;
    index index.html index.htm;
    ## 设置跨域，其实可以忽略
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

    if ($request_method = 'OPTIONS') {
        return 204;
    }
    location / {
      try_files $uri $uri/ = 404;
    }
}

创建项目

这里我直接使用我自己的项目，这个项目也在github上开源了，谁都可以看到 https://github.com/aehyok/blog

当然这里面已经包含了我的半自动化脚本和全自动 github Actions yml脚本，推送代码到指定分支的时候就会自动部署。

通过脚本执行打包后，自动拷贝到linux服务器

在package.json中引入zx

npm i zx

然后在package.json中的scripts

"buildtome": "npm run build && zx ./scripts/prebuild.mjs",

prebuild.js文件内容如下

import { $, argv } from "zx";

export const isWin = () => {
  // win32 代表window平台
  // darwin 代表mac平台
  //
  return process.platform === "win32" ? true : false;
}


const root = process.cwd()
let dir = isWin() ? '/h/github/blog': root
console.log(process.platform, 'root')
let path = `${dir}/docs/.vitepress/dist` 
const gitPullInfo = await $`scp -r ${path}/* root@81.69.241.99:/usr/local/qiankun/blog/`
// const gitPullInfo = await $`cd ${path};`;
if(gitPullInfo.exitCode === 0) {
  console.log('复制到linux远程服务器成功')
} else {
  console.log('发生错误')
}

先来判断是在window执行的脚本，还是在mac下（linux应该也可以不过我没尝试过）两者获取路径的方式是不太一样。 然后其实就是通过scp指令，将本地打包编译好的目录，拷贝到服务器对应的目录上