vue3前端项目一步一步自动化部署到linux的nginx服务上-阿里云开发者社区

vue3前端项目一步一步自动化部署到linux的nginx服务上

2023-04-24 509

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

+关注继续查看

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

本文主要讲解如何一步一步的来部署自己的前端项目，到linux服务器上。我自己的linux服务器选择的是opensuse。

这里说明一下：opensuse 通过zypper可以方便的进行软件管理，类似centos的yum 软件。

1、安装nginx

// 查找nginx
zypper search nginx
// 通过zypper安装nginx
zypper install nginx
// 查看nginx是否安装成功,安装成功则出现版本相关信息
nginx -v

2、设置nginx服务自动启动

// 设置nginx开机自动启动
systemctl enable nginx
// 取消开机自动启动
systemctl disable nginx
// 启动nginx服务
systemctl start nginx
// 停止nginx服务
systemctl stop nginx
// 查看nginx服务的状态
systemctl status nginx
//修改nginx配置文件等，重新载入
nginx -s reload

3、配置nginx的配置文件

在/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;
    }
}

4、创建项目

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

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

这里要使用的便是我自己写的半自动化脚本。

5、通过脚本执行打包后，自动拷贝到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('发生错误')
}