element web
1.11.83
Element(이전의 Vector 및 Riot)는 Matrix JS SDK를 사용하여 구축된 Matrix 웹 클라이언트입니다.
Element에는 다양한 환경에 대한 여러 계층의 지원이 있습니다.
지원됨
문제가 적극적으로 분류되고 회귀로 인해 출시가 차단됨
정의:
데스크톱 OS의 Chrome, Firefox, Edge의 최신 2개 주요 버전
Safari의 마지막 2개 버전
데스크톱 OS의 공식 Element Desktop 앱 최신 릴리스
데스크톱 OS는 OS 공급업체에서 적극적으로 지원하고 보안 업데이트를 받는 데스크톱 장치용 macOS, Windows 및 Linux 버전을 의미합니다.
최선의 노력
문제가 승인되었으며 회귀로 인해 릴리스가 차단되지 않습니다 .
더 광범위한 Element 제품(Element Call 및 Enterprise Server Suite 포함)은 여전히 이러한 브라우저를 공식적으로 지원하지 않습니다.
요소 웹 프로젝트와 해당 기여자는 클라이언트 기능을 유지하고 다른 형제 기능(예: 요소 호출)이 작동하지 않을 수 있는 부분을 적절하게 저하시켜야 합니다.
정의:
Firefox ESR 및 Chrome/Edge Extended Stable의 마지막 주요 릴리스
커뮤니티 지원
문제가 승인되었으며 회귀로 인해 릴리스가 차단되지 않습니다 .
이러한 문제를 지원하기 위한 커뮤니티 기여를 환영합니다.
정의:
Android, iOS, iPadOS의 Chrome, Firefox, Safari의 최신 안정 버전을 위한 모바일 웹
지원되지 않음
정의: 지원되지 않는 환경에만 영향을 미치는 문제는 종결 되었습니다.
그 밖의 모든 것
이러한 계층에 대한 지원 기간은 위에 지정된 릴리스까지 지속되어야 하며 여기에 1개의 앱 릴리스 주기(2주)가 추가됩니다. Firefox ESR의 경우 Debian Stable에 탑재할 수 있도록 추가로 확장되었습니다.
Android 또는 iOS 장치에서 Element에 액세스하려면 현재 기본 앱인 element-android 및 element-ios를 권장합니다.
Element를 테스트하는 가장 쉬운 방법은 https://app.element.io에서 호스팅된 복사본을 사용하는 것입니다. 위험한 삶을 좋아하는 사람들을 위해 develop 브랜치는 https://develop.element.io에 지속적으로 배포됩니다.
Element의 자체 인스턴스를 호스팅하려면 Element Web 설치를 참조하세요.
Element를 데스크톱 애플리케이션으로 설치하려면 아래 데스크톱 앱으로 실행을 참조하세요.
Matrix 홈서버와 동일한 도메인 이름에서 Element를 실행하지 않는 것이 좋습니다. 그 이유는 누군가가 Element가 Matrix API에서 악의적인 사용자 생성 콘텐츠를 로드하고 렌더링하도록 한 다음 공유로 인해 Element(또는 다른 앱)에 대한 신뢰할 수 있는 액세스 권한을 갖게 된 경우 발생할 수 있는 XSS(교차 사이트 스크립팅) 취약점의 위험 때문입니다. 동일한 도메인.
우리는 이러한 상황을 방지하기 위해 몇 가지 대략적인 완화 조치를 취했지만, 처음부터 그렇게 하는 것은 여전히 좋은 습관이 아닙니다. 자세한 내용은 #1977을 참조하세요.
특별한 요구 사항이 없는 한 Element Web을 호스팅할 때 웹 서버 구성에 다음을 추가하는 것이 좋습니다.
X-Frame-Options: SAMEORIGIN 헤더는 Element Web이 프레이밍되는 것을 방지하고 클릭재킹으로부터 보호합니다.
Content-Security-Policy 헤더에 대한 frame-ancestors 'self' 지시어는 X-Frame-Options 의 최신 대체품입니다(아직 모든 브라우저가 이를 지원하는 것은 아니기 때문에 둘 다 포함해야 합니다. 이 항목을 참조하세요).
X-Content-Type-Options: nosniff 헤더, MIME 스니핑을 비활성화합니다.
X-XSS-Protection: 1; mode=block; 레거시 브라우저의 기본 XSS 보호를 위한 헤더입니다.
nginx를 사용하는 경우 다음과 같이 표시됩니다.
add_header X-Frame-Options SAMEORIGIN; add_header X-Content-Type-Options nosniff; add_header X-XSS-Protection "1; mode=block"; add_header Content-Security-Policy "frame-ancestors 'self'";
Apache의 경우 구성은 다음과 같습니다.
Header set X-Frame-Options SAMEORIGIN Header set X-Content-Type-Options nosniff Header set X-XSS-Protection "1; mode=block" Header set Content-Security-Policy "frame-ancestors 'self'"
참고: 이미 다른 곳에서 Content-Security-Policy 헤더를 설정하고 있는 경우 마지막 줄을 추가하는 대신 frame-ancestors 지시문을 포함하도록 수정해야 합니다.
Element는 최신 ES6로 구축된 모듈식 웹앱이며 Node.js 빌드 시스템을 사용합니다. 최신 LTS 버전의 Node.js가 설치되어 있는지 확인하세요.
npm 대신 yarn 사용하는 것이 좋습니다. 아직 Yarn 설치 가이드가 없다면 Yarn 설치 가이드를 참조하세요.
node 최소한 현재 권장 LTS가 되도록 node.js 설치하거나 업데이트하세요.
yarn 아직 없으면 설치하세요.
저장소를 복제합니다: git clone https://github.com/element-hq/element-web.git .
element-web 디렉터리로 전환합니다: cd element-web .
필수 구성 요소를 설치합니다: yarn install .
develop 브랜치를 사용하는 경우 적절한 개발 환경을 설정하는 것이 좋습니다(아래 개발 환경 설정 참조). 또는 개발 브랜치의 지속적인 통합 릴리스인 https://develop.element.io를 사용할 수 있습니다.
config.sample.json config.json 에 복사하고 수정하여 앱을 구성합니다. 자세한 내용은 구성 문서를 참조하세요.
배포할 tarball을 빌드하기 위한 yarn dist . 이 파일의 압축을 풀면 웹 서버에 필요한 모든 파일이 포함된 버전별 디렉터리가 제공됩니다.
Windows에서는 yarn dist 지원되지 않으므로 Windows 사용자는 yarn build 실행하여 필요한 모든 파일을 webapp 디렉터리에 빌드할 수 있습니다. dist 스크립트를 사용하지 않으면 요소 버전이 설정에 표시되지 않습니다. 그런 다음 웹 서버에 webapp 디렉터리를 마운트하여 완전히 정적 콘텐츠인 앱을 실제로 제공할 수 있습니다.
Element는 Electron으로 래핑되어 데스크톱 앱으로 실행될 수도 있습니다. https://element.io/get-started에서 사전 빌드된 버전을 다운로드하거나 원하는 경우 직접 빌드할 수 있습니다.
직접 빌드하려면 https://github.com/element-hq/element-desktop의 지침을 따르세요.
Electron 통합에 대한 초기 작업을 해주신 @aviraldg에게 많은 감사를 드립니다.
구성 문서는 원하는 경우 데스크톱 앱의 기본 설정을 재정의하는 방법을 보여줍니다.
Element는 기본 서버, 동작, 테마 등을 구성하는 다양한 설정을 지원합니다. 자세한 내용은 구성 문서를 참조하세요.
Element의 일부 기능은 설정의 Labs 섹션에 있는 플래그를 통해 활성화될 수 있습니다. 이러한 기능 중 일부는 labs.md에 설명되어 있습니다.
자체 웹 서버에서 요소를 제공하는 경우 요소에는 다음 URL이 캐시되지 않아야 합니다.
/config.*.json /i18n /home /sites /index.html
또한 / 에 대해 Cache-Control: no-cache 반환하도록 웹 서버를 구성하여 브라우저가 페이지 로드 시 캐시된 요소 복사본을 다시 검증하도록 강제하는 것이 좋습니다. 이렇게 하면 브라우저가 배포된 후 다음 페이지 로드 시 새 버전의 요소를 가져올 수 있습니다. 이는 Dockerfile의 nginx 구성에 이미 구성되어 있습니다.
Element를 개발하기 전에 Element의 디자인, 아키텍처 및 스타일도 정의하는 matrix-react-sdk 에 대한 개발자 가이드를 읽어야 합니다 .
어디서부터 시작해야 할지에 대한 지침은 문제 선택 페이지를 읽어보세요. 기능에 대한 작업을 시작하기 전에 귀하의 계획이 Element에 대한 우리의 비전과 잘 일치하는지 확인하는 것이 가장 좋습니다. 시작하기 전에 #element-dev:matrix.org에서 팀과 채팅하여 우리가 병합할 의향이 있는지 확인하세요.
또한 코드베이스에 존재하는 길들여진 드래곤과 길들여지지 않은 드래곤(gotchas)에 대한 "Here be Dragons" 가이드를 숙지해야 합니다.
Element의 아이디어는 기본 matrix-react-sdk 위에 사용자 정의의 상대적으로 가벼운 "스킨"이 되는 것입니다. matrix-react-sdk React를 사용하여 Matrix 통신 앱을 구축하는 데 유용한 상위 및 하위 수준 React 구성 요소를 모두 제공합니다.
Element는 공용 인터넷에 액세스하지 않고도 올바르게 실행되도록 고안되었습니다. 따라서 외부 CDN이나 서버에서 호스팅하는 리소스(JS libs, CSS, 이미지, 글꼴)에 의존하지 말고 대신 모든 종속성을 Element 자체에 패키지하세요.
Element의 기능 중 대부분은 실제로 matrix-js-sdk 모듈에 있습니다. git에서 develop 분기를 쉽게 추적하고 매번 수동으로 다시 빌드하지 않고도 로컬 변경을 쉽게 수행할 수 있는 방식으로 이를 설정할 수 있습니다.
먼저 matrix-js-sdk 복제하고 빌드하세요.
자식 클론 https://github.com/matrix-org/matrix-js-sdk.gitpushd 매트릭스-js-sdk 원사 링크 원사 설치팝
저장소를 복제하고 element-web 디렉터리로 전환합니다.
자식 복제 https://github.com/element-hq/element-web.gitcd 요소 웹
config.sample.json config.json 에 복사하고 수정하여 앱을 구성합니다. 자세한 내용은 구성 문서를 참조하세요.
마지막으로 Element 자체를 빌드하고 시작합니다.
원사 링크 매트릭스-js-sdk 원사 설치 실 시작
초기 빌드가 완료될 때까지 몇 초 정도 기다립니다. 다음과 같은 내용이 표시되어야 합니다.
[element-js] <s> [webpack.Progress] 100% [element-js] [element-js] ℹ ｢wdm｣: 1840 modules [element-js] ℹ ｢wdm｣: Compiled successfully.
이 명령은 웹 서버를 실행하고 소스 파일이 변경될 때 다시 빌드하므로 명령이 종료되지 않습니다. 이 개발 서버는 캐싱도 비활성화하므로 프로덕션에서는 사용하지 마십시오.
브라우저에서 http://127.0.0.1:8080/을 열어 새로 빌드된 요소를 확인하세요.
참고 : 빌드 스크립트는 Linux에서 기본적으로 inotify를 사용하여 디렉터리 변경 사항을 모니터링합니다. inotify 제한이 너무 낮으면 빌드가 자동으로 실패하거나 Error: EMFILE: too many open files 과 함께 실패합니다. 이러한 문제를 방지하려면 최소 128M 의 감시 제한과 약 512 의 인스턴스 제한을 권장합니다.
자세한 내용은 문제 #15750 및 #15774에 관심이 있을 수 있습니다.
새로운 inotify 감시 및 인스턴스 제한을 설정하려면 다음을 실행하세요.
sudo sysctl fs.inotify.max_user_watches=131072 sudo sysctl fs.inotify.max_user_instances=512 sudo sysctl -p
원하는 경우 다음을 실행하여 새 제한을 영구적으로 설정할 수 있습니다.
echo fs.inotify.max_user_watches=131072 | sudo tee -a /etc/sysctl.conf echo fs.inotify.max_user_instances=512 | sudo tee -a /etc/sysctl.conf sudo sysctl -p
matrix-js-sdk 를 변경하면 webpack에서 자동으로 선택하여 빌드해야 합니다.
이러한 단계 중 file table overflow 로 오류가 발생하는 경우 최대 열린 파일 제한이 매우 낮은 Mac을 사용하고 있을 가능성이 높습니다. ulimit -Sn 1024 실행하고 다시 시도하십시오. Element를 구축하기 전에 새 터미널을 열 때마다 이 작업을 수행해야 합니다.
tests 디렉터리에는 여러 가지 애플리케이션 수준 테스트가 있습니다. 이는 Jest 및 JSDOM과 함께 실행되도록 설계되었습니다. 실행하려면
yarn test
엔드투엔드 테스트를 실행하는 방법은 Matrix-react-sdk를 참조하세요.
새 번역을 추가하려면 번역 문서로 이동하세요.
개발자 가이드는 번역 개발 문서를 참조하세요.
문제는 분류 프로세스에 따라 커뮤니티 구성원과 웹 앱 팀에 의해 분류됩니다.
이슈 라벨을 사용하여 들어오는 모든 이슈를 정렬합니다.
