Olares/docs/zh/developer/contribute/system-app/install.md

# 安装系统应用

## 安装

在 Studio 中安装系统应用。由于目前的安装方式可能无法正确通知桌面，所以需要手动刷新页面才能看到图标。

![image](/images/developer/develop/contribute/system-app/install/install.jpg)

应用安装成功，进入 **Running** 状态时，在应用的 **Containers** 页面，点击 Open IDE 可以进入 vscode 的默认欢迎页面。

![ide](/images/developer/develop/contribute/system-app/install/install2.jpg)

::: tip
这个地方无需构建。
:::

## 克隆代码

- 进入 IDE 后，先安装 gh 工具

```shell
apt install gh
```

- 登录 Github

```shell
gh auth login
```

- 完成登录后克隆代码

  ```shell
  cd /opt/code && gh repo clone beclab/desktop
  ```
  :::tip 提示
  由于 code server 已 root 用户运行，nginx 运行在非 root 用户下，所以最好将代码 clone 到 /opt/code 目录，上面的实例已将/opt/code 挂载到节点的 application data 目录，重启 pod，代码会仍然保存。
  :::

## 运行程序

在 IDE 的 Terminal 中，运行你的程序。例如：

```sh
npm run dev
```

## nginx

- 在 vscode 中打开文件夹 `/opt/code/desktop-v1`

- 需要运行调试时，需要先修改容器里 nginx 的配置

  - 用 vscode 打开配置文件 `/etc/nginx/conf.d/default.conf`

- 修改前后端测试的代理

    ```nginx
    location / {
        proxy_pass http://127.0.0.1:9000;
        proxy_set_header            Host $http_host;
        proxy_set_header            X-real-ip $remote_addr;
        proxy_set_header            X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $http_connection;
        proxy_set_header Accept-Encoding gzip;
    }

    location /api {
        proxy_pass http://127.0.0.1:3010;
        proxy_set_header            Host $http_host;
        proxy_set_header            X-real-ip $remote_addr;
        proxy_set_header            X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $http_connection;
        proxy_set_header Accept-Encoding gzip;
    }
    ```

也可以把项目中对其他服务的代理配置进去，例如：

    ```nginx
    location /api/logout {
        add_header 'Access-Control-Allow-Headers' 'x-api-nonce,x-api-ts,x-api-ver,x-api-source';
        proxy_pass http://authelia-svc;
        proxy_set_header            Host $host;
        proxy_set_header            X-real-ip $remote_addr;
        proxy_set_header            X-Forwarded-For $proxy_add_x_forwarded_for;

        add_header X-Frame-Options SAMEORIGIN;
    }
    ```
 配置与正式在 os 里运行完全一样，无需特殊修改。

- 修改完之后 reload nginx

```shell
nginx -s reload
```

- 如果希望 nginx 的 default.conf 也保留，可以在/root/.config，或者代码仓库保存一个 default.conf。然后每次重启 pod 之后，进入 vscode 的 Terminal，重建一个 soft link

```shell
cd /etc/nginx/conf.d
rm default.conf
ln -s /root/.config/default.conf

nginx -s reload
```
:::details 完整 nginx.conf 参考（以 Desktop 为例）

```nginx
server {
	listen 8080 default_server;
	root /app;

    location / {
        proxy_pass http://127.0.0.1:9000;
        proxy_set_header            Host $http_host;
        proxy_set_header            X-real-ip $remote_addr;
        proxy_set_header            X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $http_connection;
        proxy_set_header Accept-Encoding gzip;
    }

    location /api {
        proxy_pass http://127.0.0.1:3010;
        proxy_set_header            Host $http_host;
        proxy_set_header            X-real-ip $remote_addr;
        proxy_set_header            X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $http_connection;
        proxy_set_header Accept-Encoding gzip;
    }

    location /server {
        proxy_pass http://127.0.0.1:3010;
        # rewrite ^/server(.*)$ $1 break;

        # Add original-request-related headers
        proxy_set_header            Host $host;
        proxy_set_header            X-real-ip $remote_addr;
        proxy_set_header            X-Forwarded-For $proxy_add_x_forwarded_for;

    }

      location /notification {
        proxy_pass http://127.0.0.1:3010;
        # rewrite ^/server(.*)$ $1 break;

        # Add original-request-related headers
        proxy_set_header            Host $host;
        proxy_set_header            X-real-ip $remote_addr;
        proxy_set_header            X-Forwarded-For $proxy_add_x_forwarded_for;

    }

    location /video {
        proxy_pass http://127.0.0.1:3010;
        # rewrite ^/server(.*)$ $1 break;

        # Add original-request-related headers
        proxy_set_header            Host $host;
        proxy_set_header            X-real-ip $remote_addr;
        proxy_set_header            X-Forwarded-For $proxy_add_x_forwarded_for;

    }

    location /api/logout {
        add_header 'Access-Control-Allow-Headers' 'x-api-nonce,x-api-ts,x-api-ver,x-api-source';
        proxy_pass http://authelia-svc;
        proxy_set_header            Host $host;
        proxy_set_header            X-real-ip $remote_addr;
        proxy_set_header            X-Forwarded-For $proxy_add_x_forwarded_for;

        add_header X-Frame-Options SAMEORIGIN;
    }

    location /api/device {
        add_header Access-Control-Allow-Headers "access-control-allow-headers,access-control-allow-methods,access-control-allow-origin,content-type,x-auth,x-unauth-error,x-authorization";
        add_header Access-Control-Allow-Methods "PUT, GET, DELETE, POST, OPTIONS";
	    add_header Access-Control-Allow-Origin $http_origin;
	    add_header Access-Control-Allow-Credentials true;

        proxy_pass http://settings-service;
        proxy_set_header            Host $host;
        proxy_set_header            X-real-ip $remote_addr;
        proxy_set_header            X-Forwarded-For $proxy_add_x_forwarded_for;

        add_header X-Frame-Options SAMEORIGIN;
    }

    location /api/refresh {
	    add_header Access-Control-Allow-Headers "access-control-allow-headers,access-control-allow-methods,access-control-allow-origin,content-type,x-auth,x-unauth-error,x-authorization";
        add_header Access-Control-Allow-Methods "PUT, GET, DELETE, POST, OPTIONS";
	    add_header Access-Control-Allow-Origin $http_origin;
	    add_header Access-Control-Allow-Credentials true;

        proxy_pass http://authelia-backend-svc:9091;
        proxy_set_header            Host $host;
        proxy_set_header            X-real-ip $remote_addr;
        proxy_set_header            X-Forwarded-For $proxy_add_x_forwarded_for;

        add_header X-Frame-Options SAMEORIGIN;
    }

    location /proxy/3000/ {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header            Host $http_host;
        proxy_set_header            X-real-ip $remote_addr;
        proxy_set_header            X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $http_connection;
        proxy_set_header Accept-Encoding gzip;
        add_header Access-Control-Allow-Headers "Accept, Content-Type, Accept-Encoding";
        add_header Access-Control-Allow-Methods "GET, OPTIONS";
        add_header Access-Control-Allow-Origin "*";
    }
}
```
:::

nginx 代理生效后，即可在 vscode 的 Terminal 中启动前后端服务。

::: warning
注意，服务不能启动在 80、8080、3000，这三个端口。
:::

## 预览

启动 debug 程序后，就可以在 Olares 前端，点击应用图标预览效果。

![preview](/images/developer/develop/contribute/system-app/install/end.jpg)