orangepi(香橙派)部署前端项目

1、打包

首先将前端项目build打包，build后在项目的根目录会生成一个名为build或dist的文件夹，里面通常都是一些html,css,js文件

2、连接orangepi

我们可以使用MobaXterm可视化工具来远程连接orangepi

MobaXterm Xserver with SSH, telnet, RDP, VNC and X11 - Download   MobaXterm下载地址

打开软件后通过ssh连接，可以进入到orangepi中，如下图所示：

 3、复制打包文件到orangepi中

通常前端文件放在/var/www中，如果var目录下没有www文件夹我们需要创建一个www文件夹

 接下来我们需要将打包的问价复制到www目录中，打开cmd终端，输入一下指令

scp -r /path/to/build/* user@orange_pi_ip:/var/www/

/path/to/build/* 指的是前端项目打包文件夹在电脑中的路径，例如我的项目在E盘work文件夹下，路径就是 E:/work/myProject/build/*，user是连接orangepi用的用户名，orange_pi_ip是orangepi的所在的ip。
如果执行指令后出现 Permission denied 报错，说明权限不够。需要修改文件夹权限

sudo chmod -R 777 /var/www

再次执行scp将文件复制完成。

4、下载安装，并配置nginx

使用mobaXterm进入到orangepi命令行中，依次执行以下语句，安装nginx并配置

sudo apt update  //更新软件源
sudo apt install nginx  //安装 nginx
sudo nano /etc/nginx/nginx.conf  //打开nginx配置文件

这时会打开nginx的配置文件，在http{}中添加一下内容

server {
    listen       80;  //端口号
    server_name  your_domain.com;  // 替换为你的域名或IP地址

    location / {
        root   /var/www;                   // 替换为您复制的静态文件夹的路径
        index  index.html;                 //文件夹入口文件
		try_files $uri $uri/ /index.html; 

        # 添加以下跨域配置
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
   	}
		
    
    //反向代理
    location /api {
       	proxy_pass http://192.168.50.20:8080;  //而针对以 /api 开头的请求，我们使用proxy_pass 指令将请求转发到后端服务器的地址 http://192.168.50.20:8080
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    	}
	}
}

配置完后可以执行一下指令查看nginx信息

sudo service nginx status     //检查Nginx服务的运行状态
sudo nginx -t                 //检查Nginx配置是否正确

 接下来我们就可以启动nginx服务，服务启动成功后，输入ip和端口就可以进入到我们的前端页面了

sudo service nginx start     //启动服务
sudo systemctl reload nginx  //重新加载Nginx
sudo service nginx restart   //重启nginx
sudo systemctl enable nginx  //设置 Nginx自启动:使用以下命令将Nginx服务设置为在系统启动时自启动