답변:
** PWA를 사용한 Magento 2.3 설치부터 시작하겠습니다 **
1. DIR / var / www / html /에 다음 명령을 입력하십시오 (m230은 내 Magento 2.3 디렉토리).
composer create-project --repository=https://repo.magento.com/ magento/project-community-edition=2.3.* --stability=beta m2302. 커맨드 라인으로 Magento를 설치하십시오 :
bin/magento setup:install --base-url=http://localhost/m230 --db-host=localhost --db-name=m230 --db-user=root --db-password=root --backend-frontname=admin --admin-firstname=admin --admin-lastname=admin --admin-email=admin@admin.com --admin-user=admin --admin-password=admin123 --language=en_US --currency=USD --timezone=America/Chicago --use-rewrites=13. [PWA Venia 테마]의 상위가 될 기본 pwa 테마를 만듭니다. [25]
4. 디렉토리를 app/design/frontend/Magento/pwa만들고 여기에 기본 테마의 모든 파일과 디렉토리를 복사하십시오.
기본 테마를 사용할 수 있는지 확인하십시오.
Run: php bin/magento setup:upgrade
Magento Admin-> Content-> Themes로 이동하십시오.
5. PWA 스튜디오 프로젝트를 다운로드하십시오.
6. Magento 설치 루트 디렉토리로 이동하여 프로젝트의 모듈 디렉토리 (pwa-studio / packages / pwa-module)에 연결되는 Pwa symlink 폴더를 만듭니다.
이 디렉토리에서 내 명령을 실행합니다- / var / www / html / m230
이것은 pwa 다운로드 소스가 / var / www / html / PWA / 인 디렉토리입니다.
ln -s /var/www/html/PWA/pwa-studio/packages/pwa-module app/code/Magento/Pwa7. 테마 디렉토리도 연결합니다. Magento 설치의 루트 디렉토리로 이동하여 프로젝트의 모듈 디렉토리 (pwa-studio / packages / venia-concept)에 연결되는 Pwa symlink 폴더를 만듭니다.
ln -s /var/www/html/PWA/pwa-studio/packages/venia-concept app/design/frontend/Magento/venia8. 이제 pwa-studio 프로젝트의 venia-concept 디렉토리 .env.dist로 이동하여 새 .env파일 로 복사 한 후 URL을 사용하여 변수를 Magento 개발 저장소에 업데이트하십시오.
cd /var/www/html/PWA/pwa-studio/packages/venia-concept
cp .env.dist .env9. venia 테마 및 Pwa 모듈 설치 :
run: php bin/magento setup:upgrade우리는 venia 테마가 성공적으로 설치되었음을 볼 수 있습니다.
10.에서 Venia 테마 구성 admin->Content->Configuration
11. 경로 ( /var/www/html/PWA/pwa-studio) 실행으로 이동 합니다.
npm install또는
npm install webpack-dev-server -g12. 그리고 마지막으로 /var/www/html/PWA/pwa-studio/packages/venia-concept
npm start축하합니다! Venia 테마 프로젝트를위한 개발 환경을 설정했습니다.
최대한 빨리 생산 준비가 필요한 경우 : Vue Store Front 시스템 (오픈 소스 시스템) 을 설치하고 사용했습니다 . 몇 가지 문제가 있었지만 질문에 대한 답변이 느슨하지만 커뮤니티 전체가이 단계에서 매우 유용합니다. PWA 통합)
-> React 대신 Vue를 사용합니다. 또한 ElasticSearch 및 Docker도 사용합니다. 전반적으로이 시스템은 Rest API를 통해 주로 Magento 2에 연결됩니다 (GraphQL로 시작)
시작하려면 :
Git clone https://github.com/DivanteLtd/vue-storefront
cd vue-storefront
yarn install
npm run installer그런 다음 yarn dev캐시를 비우지 만 감시 프로세스와 같이 몇 초 후에 변경 사항을 컴파일해야합니다.
물론 Magento 2가 구축 한 PWA도 훌륭하지만 불행히도 빠르게 움직이고 있으며 VS (시스템 위)와 경쟁 할 준비가되었는지 확실하지 않습니다.
-> graphql을 배우는 것이 더 좋았으며 사용자 정의가 더 쉬웠지만 당시의 잘못된 이유 일 수 있습니다.이 PWA는 반응 파일에 원시 CSS가 있습니다.
https://magento-research.github.io/pwa-studio/venia-pwa-concept/setup/
npm installmagento 2.3 설치에서 Venia 샘플 데이터를 설치해야합니다 ( https://magento-research.github.io/pwa-studio/venia-pwa-concept/install-sample-data/ 참조 )
cd packages/venia-concept && npm run build
cd ../.. && npm run watch:venia그리고 여기에 새로운 PWA가 준비되어 있어야합니다. 한 달 전에 빨리 움직이는 것처럼 보이며 많은 WIP가 있었으며 오늘날에는 예를 들어 sass 통합이 누락 된 것을 볼 수 있습니다. Magento 커뮤니티에서이 PWA를 배우고 구축 할 준비가되면이 두 번째 옵션이 더 나을 수 있습니다.
먼저 다음 명령을 사용하여 Node js 최신 버전을 설치하십시오.
- curl -sL https://deb.nodesource.com/setup_10.x | sudo bash -
- sudo apt-get install -y nodejs
- sudo apt install npm이제 Magento Root 디렉토리로 이동하십시오.
- cd var/www/html/pwa-magento/다음 명령을 사용하여 PWA 복제 디렉토리를 다운로드하고이 디렉토리에 npm을 설치하십시오.
- git clone https://github.com/magento-research/pwa-studio.git
- cd pwa-studio/
- sudo npm install
- cp packages/venia-concept/.env.dist packages/venia-concept/.env
- sudo npm run build===========================================
npx를 찾을 수 없으면 오류 PWA magento 2.3
- sudo npm i -g npx다음과 같은 오류가 발견되면 'envalid'모듈을 찾을 수 없습니다. 다음 명령을 실행하십시오.
- sudo npm install i envalid
- sudo npm install envalid이와 같은 오류가 발생하면 다음 명령을 실행하십시오. lerna ERR! npm run build -s가 '@ magento / venia-concept'에서 1을 종료했습니다.
- sudo npm restart
- sudo npm run stage:venia
- sudo npm cache clean -f
- sudo npm install -g n
- sudo n stable / sudo n latest (depends on version)============================================
- sudo npm i @magento/pwa-buildpack
- sudo npm i @magento/upward-js
- sudo npm i @magento/venia-concept
- sudo npm run build
- sudo npm run watch:venia
- sudo npm run watch:all다음 블로그로 이동할 수 있습니다.
또한 웹 사이트에서 Magento 2.3 PWA를 사용하고 사용하는 방법에 대해 자세히 설명합니다.