前端项目编译打包

前端项目编译打包

1. 概述

目标：无论前端使用什么语言或框架，生成静态页面（html）放在web服务器中。常用的vue，node.js框架的代码可以通过Node环境生成静态页面。

2. 环境准备

主机名	环境	ip
web01	nginx	10.0.0.7
devops	Node环境	10.0.0.71

3. 准备Node环境

下载nodejs软件包

[root@devops ~]# mkdir -p /server/soft
[root@devops ~]# wget --no-check-certificate -P /server/soft/ https://mirrors.tuna.tsinghua.edu.cn/nodejs-release/v14.19.3/node-v14.19.3-linux-x64.tar.gz

解压、创建软链接并追加PATH环境变量

#创建应用程序放置目录
[root@devops ~]# mkdir -p /app/tools
[root@devops ~]# tar xf /server/soft/node-v14.19.3-linux-x64.tar.gz -C /app/tools/
[root@devops ~]# ln -s /app/tools/node-v14.19.3-linux-x64/ /app/tools/node

#追加PATH环境变量
[root@devops ~]# echo 'export PATH=/app/tools/node/bin/:$PATH' >> /etc/profile
[root@devops ~]# source /etc/profile

检查是否可用

[root@devops ~]# node -v
v14.19.3

修改node源

#修改
[root@devops ~]# npm config set registry https://registry.npmmirror.com
#查看
[root@devops ~]# npm config get registry https://registry.npmmirror.com
https://registry.npmmirror.com/

4. 编译代码

下载项目代码

[root@devops ~]# mkdir -p /app/code
[root@devops ~]# yum install git -y
[root@devops ~]# git clone https://github.com/VickScarlet/lifeRestart.git /app/code/lifeRestart

进入目录，自动下载依赖

[root@devops ~]# cd /app/code/lifeRestart/
[root@devops lifeRestart]# cnpm install

生成静态资源

[root@devops lifeRestart]# cnpm run build

Tips：注意生成的静态资源的目录不一定是public，dist目录或者其他！

5. 代码上线

web01创建存放代码的目录并从devops主机上拉取编译好的代码

[root@web01 ~]# mkdir -p /app/code/lifeRestart
[root@web01 ~]# scp -r root@10.0.0.71:/app/code/lifeRestart/public/* /app/code/lifeRestart/

修改nginx配置，先将/etc/nginx/nginx.conf中的server区块注释，在/etc/nginx/conf.d/下创建配置文件。配置内容如下：

[root@web01 ~]# cat /etc/nginx/conf.d/test.yinjay.com.conf
server {
    listen 80;
    server_name test.yinjay.com;
    root /app/code/lifeRestart;

    location / {
        index index.html;
    }
}

#重启nginx
[root@web01 ~]# systemctl restart nginx

浏览器访问test.yinjay.com