[{"data":1,"prerenderedAt":1743},["ShallowReactive",2],{"tag-node":3},{"count":4,"content":5},1,[6],{"id":7,"title":8,"body":9,"category":1729,"createdAt":1731,"description":1732,"extension":1733,"index":1734,"meta":1735,"navigation":99,"path":1736,"publish":99,"seo":1737,"series":1734,"seriesTitle":1734,"stem":1738,"tag":1739,"thumbnail":1734,"updatedAt":1731,"__hash__":1742},"articles\u002Farticles\u002Fgithub-actions-node-js.md","Github Actionsを用いてVueファイルをビルド・rsyncで本番環境にデプロイする。",{"type":10,"value":11,"toc":1708},"minimark",[12,16,19,22,25,34,39,51,54,65,68,71,338,341,345,348,351,354,360,363,366,369,391,397,412,428,431,434,441,450,455,458,473,479,485,491,497,503,509,512,518,524,527,788,794,796,804,807,810,839,853,956,970,999,1002,1048,1055,1058,1065,1072,1107,1110,1149,1153,1156,1287,1298,1305,1335,1352,1397,1411,1422,1426,1429,1499,1502,1509,1513,1519,1586,1591,1601,1652,1662,1669,1672,1679,1683,1686,1689,1692,1695,1698,1701,1704],[13,14,15],"p",{},"こんにちはjunです。皆さんはVueやReact、Nuxtなどなどフロントエンドフレームワークやライブラリを使っていますでしょうか？これらのライブラリはフロントの構築が楽になりますが、一度Node.jsを用いてビルドする必要があります。そしてビルドしたファイルを読み込ませることで動作します。",[13,17,18],{},"ローカルの環境ではNode.jsがあるので問題ないですが、デプロイする本番環境になくて困ったということはありませんでしょうか？サーバー要件などで本番環境にNode.jsを入れられない、無い場合は予めどこかでビルドして転送する必要があります。",[13,20,21],{},"一番手っ取り早いのはローカルでビルドしてFTPなりrsyncすることです。しかし何人もプロジェクトに関わっていたり、属人化したり、環境が統一されていないなど色々とデメリットがあります。",[13,23,24],{},"私はLaravel+Nuxt.jsなプロジェクトを開発し、Xserver（レンタルサーバー）に配置したことがあります。Laravelのアセットファイルと、Nuxt.jsはNode.jsでビルドする必要がありますが、レンタルサーバー にはNode.jsがありません。（Xserverには気合で入れらるらしいですが、、パフォーマンスなどの都合でやめました。）",[13,26,27,28,33],{},"そこで前から気になっていたGithub Actionsを用いてGithub上でビルドを行い、本番環境でrsyncすることでなんとかアセットファイル系がデプロイできました。今回はこの方法について解説します。前提やGithub Actionsの説明から行いますで、さっさと内部コードを知りたい方は「",[29,30,32],"a",{"href":31},"#%E3%83%AF%E3%83%BC%E3%82%AF%E3%83%95%E3%83%AD%E3%83%BC%E3%82%92%E6%9B%B8%E3%81%84%E3%81%A6%E3%81%84%E3%81%8F","ワークフローを書いていく","」へ移動してください。",[35,36,38],"h2",{"id":37},"github-actionsとは","Github Actionsとは",[40,41,42],"blockquote",{},[13,43,44,45,50],{},"GitHub Actionsを使用すると、ワールドクラスのCI \u002F CDですべてのソフトウェアワークフローを簡単に自動化できます。 GitHubから直接コードをビルド、テスト、デプロイでき、コードレビュー、ブランチ管理、問題のトリアージを希望どおりに機能させます。(",[29,46,47],{"href":47,"rel":48},"https:\u002F\u002Fgithub.co.jp\u002Ffeatures\u002Factions",[49],"nofollow",")",[13,52,53],{},"Github ActionsはGithubでビルド、テスト、デプロイ作業ができる環境です。Github上のコードを用いてすぐにビルドなどができます。例えばLaravelのVueファイルをビルドする際にはLaravelのプロジェクトルートで",[55,56,61],"pre",{"className":57,"code":59,"language":60},[58],"language-text","npm run prod\n","text",[62,63,59],"code",{"__ignoreMap":64},"",[13,66,67],{},"とnode.jsのコマンドを打って、node.jsを動かしてビルドファイルを作成します。そしてビルド後にはcss,jsディレクトリが作成されます。このビルド操作をGithubの環境でも行えるようにします。",[13,69,70],{},"以下のようなymlファイルをGithub上で作成して、ビルド・やりたいコマンドを記述します。",[55,72,76],{"className":73,"code":74,"language":75,"meta":64,"style":64},"language-yml shiki shiki-themes material-theme-ocean","name: Deploy\n\non: [ workflow_dispatch ]\n\njobs:\n  build:\n\n    runs-on: ubuntu-latest\n    \n    steps:\n    - uses: actions\u002Fcheckout@v2\n      with:\n        ref: release\n    - uses: actions\u002Fsetup-node@v2\n      with:\n        node-version: '14'\n        cache: 'npm'\n     - name: public build\n      run: |\n        npm install\n        npm run prod\n        rsync -av --delete \\\n        .\u002Fpublic\u002Fcss .\u002Fpublic\u002Fjs .\u002Fpublic\u002Fimages \\\n        deploy:$LARAVEL_PATH\u002Fpublic\u002F\n        scp .\u002Fpublic\u002Fmix-manifest.json deploy:$LARAVEL_PATH\u002Fpublic\u002Fmix-manifest.json\n      env:\n        LARAVEL_PATH : ${{ secrets.LARAVEL_PATH }}\n","yml",[62,77,78,94,101,119,124,133,141,146,157,164,172,186,194,205,217,224,241,256,270,282,288,294,300,306,312,318,326],{"__ignoreMap":64},[79,80,82,86,90],"span",{"class":81,"line":4},"line",[79,83,85],{"class":84},"s-wAU","name",[79,87,89],{"class":88},"sAklC",":",[79,91,93],{"class":92},"sfyAc"," Deploy\n",[79,95,97],{"class":81,"line":96},2,[79,98,100],{"emptyLinePlaceholder":99},true,"\n",[79,102,104,108,110,113,116],{"class":81,"line":103},3,[79,105,107],{"class":106},"sbqyR","on",[79,109,89],{"class":88},[79,111,112],{"class":88}," [",[79,114,115],{"class":92}," workflow_dispatch",[79,117,118],{"class":88}," ]\n",[79,120,122],{"class":81,"line":121},4,[79,123,100],{"emptyLinePlaceholder":99},[79,125,127,130],{"class":81,"line":126},5,[79,128,129],{"class":84},"jobs",[79,131,132],{"class":88},":\n",[79,134,136,139],{"class":81,"line":135},6,[79,137,138],{"class":84},"  build",[79,140,132],{"class":88},[79,142,144],{"class":81,"line":143},7,[79,145,100],{"emptyLinePlaceholder":99},[79,147,149,152,154],{"class":81,"line":148},8,[79,150,151],{"class":84},"    runs-on",[79,153,89],{"class":88},[79,155,156],{"class":92}," ubuntu-latest\n",[79,158,160],{"class":81,"line":159},9,[79,161,163],{"class":162},"s0W1g","    \n",[79,165,167,170],{"class":81,"line":166},10,[79,168,169],{"class":84},"    steps",[79,171,132],{"class":88},[79,173,175,178,181,183],{"class":81,"line":174},11,[79,176,177],{"class":88},"    -",[79,179,180],{"class":84}," uses",[79,182,89],{"class":88},[79,184,185],{"class":92}," actions\u002Fcheckout@v2\n",[79,187,189,192],{"class":81,"line":188},12,[79,190,191],{"class":84},"      with",[79,193,132],{"class":88},[79,195,197,200,202],{"class":81,"line":196},13,[79,198,199],{"class":84},"        ref",[79,201,89],{"class":88},[79,203,204],{"class":92}," release\n",[79,206,208,210,212,214],{"class":81,"line":207},14,[79,209,177],{"class":88},[79,211,180],{"class":84},[79,213,89],{"class":88},[79,215,216],{"class":92}," actions\u002Fsetup-node@v2\n",[79,218,220,222],{"class":81,"line":219},15,[79,221,191],{"class":84},[79,223,132],{"class":88},[79,225,227,230,232,235,238],{"class":81,"line":226},16,[79,228,229],{"class":84},"        node-version",[79,231,89],{"class":88},[79,233,234],{"class":88}," '",[79,236,237],{"class":92},"14",[79,239,240],{"class":88},"'\n",[79,242,244,247,249,251,254],{"class":81,"line":243},17,[79,245,246],{"class":84},"        cache",[79,248,89],{"class":88},[79,250,234],{"class":88},[79,252,253],{"class":92},"npm",[79,255,240],{"class":88},[79,257,259,262,265,267],{"class":81,"line":258},18,[79,260,261],{"class":88},"     -",[79,263,264],{"class":84}," name",[79,266,89],{"class":88},[79,268,269],{"class":92}," public build\n",[79,271,273,276,278],{"class":81,"line":272},19,[79,274,275],{"class":84},"      run",[79,277,89],{"class":88},[79,279,281],{"class":280},"s6cf3"," |\n",[79,283,285],{"class":81,"line":284},20,[79,286,287],{"class":92},"        npm install\n",[79,289,291],{"class":81,"line":290},21,[79,292,293],{"class":92},"        npm run prod\n",[79,295,297],{"class":81,"line":296},22,[79,298,299],{"class":92},"        rsync -av --delete \\\n",[79,301,303],{"class":81,"line":302},23,[79,304,305],{"class":92},"        .\u002Fpublic\u002Fcss .\u002Fpublic\u002Fjs .\u002Fpublic\u002Fimages \\\n",[79,307,309],{"class":81,"line":308},24,[79,310,311],{"class":92},"        deploy:$LARAVEL_PATH\u002Fpublic\u002F\n",[79,313,315],{"class":81,"line":314},25,[79,316,317],{"class":92},"        scp .\u002Fpublic\u002Fmix-manifest.json deploy:$LARAVEL_PATH\u002Fpublic\u002Fmix-manifest.json\n",[79,319,321,324],{"class":81,"line":320},26,[79,322,323],{"class":84},"      env",[79,325,132],{"class":88},[79,327,329,332,335],{"class":81,"line":328},27,[79,330,331],{"class":84},"        LARAVEL_PATH",[79,333,334],{"class":88}," :",[79,336,337],{"class":92}," ${{ secrets.LARAVEL_PATH }}\n",[13,339,340],{},"Dokcerファイルやバッチファイルと似た感じです。Node.jsの環境などはGithubが用意してくれます。",[342,343,344],"h3",{"id":344},"使える言語など",[13,346,347],{},"結構なんでもいけます。Node.jsはしかり、PHP\u002FPython\u002FRuby\u002FJava\u002FPower Shellなど色々あります。",[342,349,350],{"id":350},"料金",[13,352,353],{},"パブリックリポジトリの場合は何分使おうが無料です。しかしプライベートの場合は無料枠があり、フリーは毎月2000分までとなっています。(2022年1月時点)",[13,355,356,357],{},"参照：",[29,358,47],{"href":47,"rel":359},[49],[13,361,362],{},"私のプロジェクトの場合、大体3分ぐらいで終わりますし、頻繁にビルドしないので基本無料で使えそうです。",[35,364,365],{"id":365},"全体処理の概要とビルド対象",[13,367,368],{},"今回ビルドするプロジェクトはLaravelとNuxtが連携されたプロジェクトです。",[370,371,372,384],"ul",{},[373,374,375,376,379,380,383],"li",{},"Laravelのresources配下に作ったsassとVueファイル。公開ディレクトリの",[62,377,378],{},"css\u002F",",",[62,381,382],{},"js\u002F","に吐き出される",[373,385,386,387,390],{},"Nuxtの静的書き出しファイル。",[62,388,389],{},"dist\u002F","というディレクトリが生成される。",[55,392,395],{"className":393,"code":394,"language":60},[58],".\n├── README.md\n├── app\n├── artisan\n├── bootstrap\n├── composer.json\n├── composer.lock\n├── config\n├── database\n├── nuxt # nuxtはここ\n├── package-lock.json\n├── package.json\n├── phpunit.xml\n├── public # ここにLaravelのcss,jsが吐き出される\n├── resources\n├── routes\n├── server.php\n├── storage\n├── tests\n├── tinker_test.php\n└── webpack.mix.js\n",[62,396,394],{"__ignoreMap":64},[13,398,399,400,403,404,407,408,411],{},"まあとりあえず、Laravelルートで",[62,401,402],{},"npm run prod","そして、",[62,405,406],{},"nuxt\u002F","にて",[62,409,410],{},"npm run generate","してnode.jsを動かす必要があります。",[13,413,414,415,379,417,379,419,379,422,379,425,427],{},"そして生成されてた",[62,416,378],{},[62,418,382],{},[62,420,421],{},"images\u002F",[62,423,424],{},"mix-manifest.json",[62,426,389],{},"ディレクトリ・ファイルを本番サーバーに転送します。",[13,429,430],{},"転送の際にはrsyncを使用し、SSHの鍵認証で接続します。またこのアクションは手動で行うようにします。一応、masterブランチにプッシュされた時に自動で実行なんてこともできます。ただし今回はビルドする環境が欲しいだけなので、処理の実行は手動で行います。以上がActionの概要です。",[35,432,433],{"id":433},"環境変数を定義しておく",[13,435,436,437,440],{},"まずSSHやビルドで使用する",[62,438,439],{},".env","など環境変数を定義しておきます。Github Actionsでも環境変数を定義できます。",[13,442,443,444,449],{},"リポジトリのSettingsから",[29,445,448],{"href":446,"rel":447},"https:\u002F\u002Fgithub.com\u002Fmedia-ch\u002Fsetagaya_foodshare\u002Fsettings\u002Fsecrets\u002Factions",[49],"Secrets","の画面で定義できます。",[451,452],"image-render",{":src":453,":width":454},"'github-actions-node-js\u002Fsecrets-setting.png'","'100%'",[13,456,457],{},"「New repository secret」をクリックしてキー名と値を入力します。",[13,459,460,464,465,468,469,472],{},[461,462,463],"strong",{},"SSH_KEY","：SSHに使用する鍵ファイルの中身です。",[62,466,467],{},".pem","、",[62,470,471],{},".key","などを開いて記述された文字をすべてコピペしてください。",[13,474,475,478],{},[461,476,477],{},"SSH_HOST","：接続先のホスト名です。",[13,480,481,484],{},[461,482,483],{},"SSH_PORT","：接続先のポートです。",[13,486,487,490],{},[461,488,489],{},"SSH_USER","：接続先のユーザーです。",[13,492,493,496],{},[461,494,495],{},"LARAEL_PATH","：本番サーバーでのLaravelが置かれている絶対パスです。",[13,498,499,502],{},[461,500,501],{},"GOOGLE_MAP_API_KEY","：NuxtでGoogleMapのAPI（フロントに出してもOKなやつ）を使っているので定義。あとで使います。",[13,504,505,506,508],{},"以上のSSHに関連する値と、",[62,507,439],{},"の記述で必要であれば書いておきます。それではアクションの内容を書いていきましょう。",[35,510,511],{"id":511},"ワークフローを作成しテンプレートを選択する",[13,513,514,515],{},"メニューの「Actions」をクリックしたのち、「New Workflow」をクリックします。\n",[451,516],{":src":517},"'github-actions-node-js\u002Fmenu.png'",[13,519,520,521],{},"するとworkflowを選択する画面にて、テンプレートをいくつか用意してくれています。\n",[451,522],{":src":523},"'github-actions-node-js\u002Fworkflows.png'",[13,525,526],{},"今回はNode.jsのビルドしかないので「Node.js」を選択します。するとある程度の記述が書かれた状態で、yamlが表示されます。",[55,528,532],{"className":529,"code":530,"language":531,"meta":64,"style":64},"language-yaml shiki shiki-themes material-theme-ocean","# This workflow will do a clean installation of node dependencies, cache\u002Frestore them, build the source code and run tests across different versions of node\n# For more information see: https:\u002F\u002Fhelp.github.com\u002Factions\u002Flanguage-and-framework-guides\u002Fusing-nodejs-with-github-actions\n\nname: Node.js CI\n\non:\n  push:\n    branches: [ master ]\n  pull_request:\n    branches: [ master ]\n\njobs:\n  build:\n\n    runs-on: ubuntu-latest\n\n    strategy:\n      matrix:\n        node-version: [12.x, 14.x, 16.x]\n        # See supported Node.js release schedule at https:\u002F\u002Fnodejs.org\u002Fen\u002Fabout\u002Freleases\u002F\n\n    steps:\n    - uses: actions\u002Fcheckout@v2\n    - name: Use Node.js ${{ matrix.node-version }}\n      uses: actions\u002Fsetup-node@v2\n      with:\n        node-version: ${{ matrix.node-version }}\n        cache: 'npm'\n    - run: npm ci\n    - run: npm run build --if-present\n    - run: npm test\n","yaml",[62,533,534,540,545,549,558,562,568,575,589,596,608,612,618,624,628,636,640,647,654,678,683,687,693,703,714,723,729,738,751,764,776],{"__ignoreMap":64},[79,535,536],{"class":81,"line":4},[79,537,539],{"class":538},"sC9rS","# This workflow will do a clean installation of node dependencies, cache\u002Frestore them, build the source code and run tests across different versions of node\n",[79,541,542],{"class":81,"line":96},[79,543,544],{"class":538},"# For more information see: https:\u002F\u002Fhelp.github.com\u002Factions\u002Flanguage-and-framework-guides\u002Fusing-nodejs-with-github-actions\n",[79,546,547],{"class":81,"line":103},[79,548,100],{"emptyLinePlaceholder":99},[79,550,551,553,555],{"class":81,"line":121},[79,552,85],{"class":84},[79,554,89],{"class":88},[79,556,557],{"class":92}," Node.js CI\n",[79,559,560],{"class":81,"line":126},[79,561,100],{"emptyLinePlaceholder":99},[79,563,564,566],{"class":81,"line":135},[79,565,107],{"class":106},[79,567,132],{"class":88},[79,569,570,573],{"class":81,"line":143},[79,571,572],{"class":84},"  push",[79,574,132],{"class":88},[79,576,577,580,582,584,587],{"class":81,"line":148},[79,578,579],{"class":84},"    branches",[79,581,89],{"class":88},[79,583,112],{"class":88},[79,585,586],{"class":92}," master",[79,588,118],{"class":88},[79,590,591,594],{"class":81,"line":159},[79,592,593],{"class":84},"  pull_request",[79,595,132],{"class":88},[79,597,598,600,602,604,606],{"class":81,"line":166},[79,599,579],{"class":84},[79,601,89],{"class":88},[79,603,112],{"class":88},[79,605,586],{"class":92},[79,607,118],{"class":88},[79,609,610],{"class":81,"line":174},[79,611,100],{"emptyLinePlaceholder":99},[79,613,614,616],{"class":81,"line":188},[79,615,129],{"class":84},[79,617,132],{"class":88},[79,619,620,622],{"class":81,"line":196},[79,621,138],{"class":84},[79,623,132],{"class":88},[79,625,626],{"class":81,"line":207},[79,627,100],{"emptyLinePlaceholder":99},[79,629,630,632,634],{"class":81,"line":219},[79,631,151],{"class":84},[79,633,89],{"class":88},[79,635,156],{"class":92},[79,637,638],{"class":81,"line":226},[79,639,100],{"emptyLinePlaceholder":99},[79,641,642,645],{"class":81,"line":243},[79,643,644],{"class":84},"    strategy",[79,646,132],{"class":88},[79,648,649,652],{"class":81,"line":258},[79,650,651],{"class":84},"      matrix",[79,653,132],{"class":88},[79,655,656,658,660,662,665,667,670,672,675],{"class":81,"line":272},[79,657,229],{"class":84},[79,659,89],{"class":88},[79,661,112],{"class":88},[79,663,664],{"class":92},"12.x",[79,666,379],{"class":88},[79,668,669],{"class":92}," 14.x",[79,671,379],{"class":88},[79,673,674],{"class":92}," 16.x",[79,676,677],{"class":88},"]\n",[79,679,680],{"class":81,"line":284},[79,681,682],{"class":538},"        # See supported Node.js release schedule at https:\u002F\u002Fnodejs.org\u002Fen\u002Fabout\u002Freleases\u002F\n",[79,684,685],{"class":81,"line":290},[79,686,100],{"emptyLinePlaceholder":99},[79,688,689,691],{"class":81,"line":296},[79,690,169],{"class":84},[79,692,132],{"class":88},[79,694,695,697,699,701],{"class":81,"line":302},[79,696,177],{"class":88},[79,698,180],{"class":84},[79,700,89],{"class":88},[79,702,185],{"class":92},[79,704,705,707,709,711],{"class":81,"line":308},[79,706,177],{"class":88},[79,708,264],{"class":84},[79,710,89],{"class":88},[79,712,713],{"class":92}," Use Node.js ${{ matrix.node-version }}\n",[79,715,716,719,721],{"class":81,"line":314},[79,717,718],{"class":84},"      uses",[79,720,89],{"class":88},[79,722,216],{"class":92},[79,724,725,727],{"class":81,"line":320},[79,726,191],{"class":84},[79,728,132],{"class":88},[79,730,731,733,735],{"class":81,"line":328},[79,732,229],{"class":84},[79,734,89],{"class":88},[79,736,737],{"class":92}," ${{ matrix.node-version }}\n",[79,739,741,743,745,747,749],{"class":81,"line":740},28,[79,742,246],{"class":84},[79,744,89],{"class":88},[79,746,234],{"class":88},[79,748,253],{"class":92},[79,750,240],{"class":88},[79,752,754,756,759,761],{"class":81,"line":753},29,[79,755,177],{"class":88},[79,757,758],{"class":84}," run",[79,760,89],{"class":88},[79,762,763],{"class":92}," npm ci\n",[79,765,767,769,771,773],{"class":81,"line":766},30,[79,768,177],{"class":88},[79,770,758],{"class":84},[79,772,89],{"class":88},[79,774,775],{"class":92}," npm run build --if-present\n",[79,777,779,781,783,785],{"class":81,"line":778},31,[79,780,177],{"class":88},[79,782,758],{"class":84},[79,784,89],{"class":88},[79,786,787],{"class":92}," npm test\n",[13,789,790,791,793],{},"最初は上記の構成となっています。",[62,792,85],{},"はワークフローの名前になります。わかりやすいものに変えておきましょう。",[35,795,32],{"id":32},[13,797,798,799],{},"まず最初にLaravelのアセットファイルを作成してrsyncするとこまで記述します。なお登場する記述に関してはこちらの公式ドキュメントを参考にしてください。",[29,800,803],{"href":801,"rel":802},"https:\u002F\u002Fdocs.github.com\u002Fja\u002Factions\u002Fusing-workflows\u002Fworkflow-syntax-for-github-actions",[49],"ワークフロー構文",[342,805,806],{"id":806},"実行条件などの変更",[13,808,809],{},"最初は実行条件などを変更します。",[55,811,813],{"className":529,"code":812,"language":531,"meta":64,"style":64},"name: Deploy\n\non: [ workflow_dispatch ]\n",[62,814,815,823,827],{"__ignoreMap":64},[79,816,817,819,821],{"class":81,"line":4},[79,818,85],{"class":84},[79,820,89],{"class":88},[79,822,93],{"class":92},[79,824,825],{"class":81,"line":96},[79,826,100],{"emptyLinePlaceholder":99},[79,828,829,831,833,835,837],{"class":81,"line":103},[79,830,107],{"class":106},[79,832,89],{"class":88},[79,834,112],{"class":88},[79,836,115],{"class":92},[79,838,118],{"class":88},[13,840,841,844,845,848,849,852],{},[62,842,843],{},"on:","はこのワークフローの実行条件です。デフォルトでは",[62,846,847],{},"master","ブランチにpushされることが条件ですが、ここでは",[62,850,851],{},"workflow_dispatch","として、手動で実行できるようにします。",[55,854,856],{"className":529,"code":855,"language":531,"meta":64,"style":64},"jobs:\n  build:\n\n    runs-on: ubuntu-latest\n    \n    steps:\n    - uses: actions\u002Fcheckout@v2\n      with:\n        ref: release\n    - uses: actions\u002Fsetup-node@v2\n      with:\n        node-version: '14'\n        cache: 'npm'\n",[62,857,858,864,870,874,882,886,892,902,908,916,926,932,944],{"__ignoreMap":64},[79,859,860,862],{"class":81,"line":4},[79,861,129],{"class":84},[79,863,132],{"class":88},[79,865,866,868],{"class":81,"line":96},[79,867,138],{"class":84},[79,869,132],{"class":88},[79,871,872],{"class":81,"line":103},[79,873,100],{"emptyLinePlaceholder":99},[79,875,876,878,880],{"class":81,"line":121},[79,877,151],{"class":84},[79,879,89],{"class":88},[79,881,156],{"class":92},[79,883,884],{"class":81,"line":126},[79,885,163],{"class":162},[79,887,888,890],{"class":81,"line":135},[79,889,169],{"class":84},[79,891,132],{"class":88},[79,893,894,896,898,900],{"class":81,"line":143},[79,895,177],{"class":88},[79,897,180],{"class":84},[79,899,89],{"class":88},[79,901,185],{"class":92},[79,903,904,906],{"class":81,"line":148},[79,905,191],{"class":84},[79,907,132],{"class":88},[79,909,910,912,914],{"class":81,"line":159},[79,911,199],{"class":84},[79,913,89],{"class":88},[79,915,204],{"class":92},[79,917,918,920,922,924],{"class":81,"line":166},[79,919,177],{"class":88},[79,921,180],{"class":84},[79,923,89],{"class":88},[79,925,216],{"class":92},[79,927,928,930],{"class":81,"line":174},[79,929,191],{"class":84},[79,931,132],{"class":88},[79,933,934,936,938,940,942],{"class":81,"line":188},[79,935,229],{"class":84},[79,937,89],{"class":88},[79,939,234],{"class":88},[79,941,237],{"class":92},[79,943,240],{"class":88},[79,945,946,948,950,952,954],{"class":81,"line":196},[79,947,246],{"class":84},[79,949,89],{"class":88},[79,951,234],{"class":88},[79,953,253],{"class":92},[79,955,240],{"class":88},[13,957,958,959,962,963,965,966,969],{},"このリポジトリの場合、本番環境は常に",[62,960,961],{},"release","ブランチをプルするのでビルド対象ファイルも",[62,964,961],{},"のものを使用します。そのため",[62,967,968],{},"- uses: actions\u002Fcheckout@v2","というブランチのチェックアウトが処理を行う記述をします。",[55,971,973],{"className":529,"code":972,"language":531,"meta":64,"style":64},"    - uses: actions\u002Fcheckout@v2\n      with:\n        ref: release\n",[62,974,975,985,991],{"__ignoreMap":64},[79,976,977,979,981,983],{"class":81,"line":4},[79,978,177],{"class":88},[79,980,180],{"class":84},[79,982,89],{"class":88},[79,984,185],{"class":92},[79,986,987,989],{"class":81,"line":96},[79,988,191],{"class":84},[79,990,132],{"class":88},[79,992,993,995,997],{"class":81,"line":103},[79,994,199],{"class":84},[79,996,89],{"class":88},[79,998,204],{"class":92},[13,1000,1001],{},"これでリリースブランチにチェックアウトしてビルドできるようになります。",[55,1003,1005],{"className":529,"code":1004,"language":531,"meta":64,"style":64},"- uses: actions\u002Fsetup-node@v2\n      with:\n        node-version: '14'\n        cache: 'npm'\n",[62,1006,1007,1018,1024,1036],{"__ignoreMap":64},[79,1008,1009,1012,1014,1016],{"class":81,"line":4},[79,1010,1011],{"class":88},"-",[79,1013,180],{"class":84},[79,1015,89],{"class":88},[79,1017,216],{"class":92},[79,1019,1020,1022],{"class":81,"line":96},[79,1021,191],{"class":84},[79,1023,132],{"class":88},[79,1025,1026,1028,1030,1032,1034],{"class":81,"line":103},[79,1027,229],{"class":84},[79,1029,89],{"class":88},[79,1031,234],{"class":88},[79,1033,237],{"class":92},[79,1035,240],{"class":88},[79,1037,1038,1040,1042,1044,1046],{"class":81,"line":121},[79,1039,246],{"class":84},[79,1041,89],{"class":88},[79,1043,234],{"class":88},[79,1045,253],{"class":92},[79,1047,240],{"class":88},[13,1049,1050,1051,1054],{},"これでNode.js14の環境を使用できるようになり、npmコマンドも使用できるようになります。それでは",[62,1052,1053],{},"step:","配下に実行するコマンドを書いていきましょう。",[342,1056,1057],{"id":1057},"実行コードの書き方",[13,1059,1060,1061,1064],{},"実行コードは",[62,1062,1063],{},"name:","を用いて区分けできます。長いと何がなんだか分からなくなるので、書いておくといいです。",[13,1066,1067,1068,1071],{},"そして実行内容は",[62,1069,1070],{},"run:","に記述します。",[55,1073,1075],{"className":529,"code":1074,"language":531,"meta":64,"style":64},"    - run: npm ci\n    - run: npm run build --if-present\n    - run: npm test\n",[62,1076,1077,1087,1097],{"__ignoreMap":64},[79,1078,1079,1081,1083,1085],{"class":81,"line":4},[79,1080,177],{"class":88},[79,1082,758],{"class":84},[79,1084,89],{"class":88},[79,1086,763],{"class":92},[79,1088,1089,1091,1093,1095],{"class":81,"line":96},[79,1090,177],{"class":88},[79,1092,758],{"class":84},[79,1094,89],{"class":88},[79,1096,775],{"class":92},[79,1098,1099,1101,1103,1105],{"class":81,"line":103},[79,1100,177],{"class":88},[79,1102,758],{"class":84},[79,1104,89],{"class":88},[79,1106,787],{"class":92},[13,1108,1109],{},"のように１つづつ書いてもいいですが、ここでは以下のようにまとめて書くことにします。",[55,1111,1113],{"className":529,"code":1112,"language":531,"meta":64,"style":64},"    - name: ssh key generate\n      run: |\n        echo \"$SSH_KEY\" > id_rsa\n        mkdir ~\u002F.ssh\n        chmod 700 ~\u002F.ssh\n",[62,1114,1115,1126,1134,1139,1144],{"__ignoreMap":64},[79,1116,1117,1119,1121,1123],{"class":81,"line":4},[79,1118,177],{"class":88},[79,1120,264],{"class":84},[79,1122,89],{"class":88},[79,1124,1125],{"class":92}," ssh key generate\n",[79,1127,1128,1130,1132],{"class":81,"line":96},[79,1129,275],{"class":84},[79,1131,89],{"class":88},[79,1133,281],{"class":280},[79,1135,1136],{"class":81,"line":103},[79,1137,1138],{"class":92},"        echo \"$SSH_KEY\" > id_rsa\n",[79,1140,1141],{"class":81,"line":121},[79,1142,1143],{"class":92},"        mkdir ~\u002F.ssh\n",[79,1145,1146],{"class":81,"line":126},[79,1147,1148],{"class":92},"        chmod 700 ~\u002F.ssh\n",[342,1150,1152],{"id":1151},"sshの設定","SSHの設定",[13,1154,1155],{},"そんでは最初にSSHの設定を行います。毎回、鍵のパスとかを記述するのは面倒なのでSSHのconfigファイルを作ってエイリアスで呼べるようにしましょう。",[55,1157,1159],{"className":529,"code":1158,"language":531,"meta":64,"style":64},"    - name: ssh key generate\n      run: |\n        echo \"$SSH_KEY\" > id_rsa\n        mkdir ~\u002F.ssh\n        chmod 700 ~\u002F.ssh\n        mv id_rsa ~\u002F.ssh\u002F\n        chmod 600 ~\u002F.ssh\u002Fid_rsa\n        echo \"HOST deploy\" >> ~\u002F.ssh\u002Fconfig\n        echo \"HostName $SSH_HOST\" >> ~\u002F.ssh\u002Fconfig\n        echo \"user $SSH_USER\" >> ~\u002F.ssh\u002Fconfig\n        echo \"Port $SSH_PORT\" >> ~\u002F.ssh\u002Fconfig\n        echo \"IdentityFile $HOME\u002F.ssh\u002Fid_rsa\" >> ~\u002F.ssh\u002Fconfig\n        echo \"StrictHostKeyChecking no\" >> ~\u002F.ssh\u002Fconfig\n        echo \"UserKnownHostsFile=\u002Fdev\u002Fnull\" >> ~\u002F.ssh\u002Fconfig\n        chmod 644 ~\u002F.ssh\u002Fconfig\n      env:\n        SSH_KEY: ${{ secrets.SSH_KEY }}\n        SSH_HOST: ${{ secrets.SSH_HOST }}\n        SSH_USER: ${{ secrets.SSH_USER }}\n        SSH_PORT: ${{ secrets.SSH_PORT }}\n",[62,1160,1161,1171,1179,1183,1187,1191,1196,1201,1206,1211,1216,1221,1226,1231,1236,1241,1247,1257,1267,1277],{"__ignoreMap":64},[79,1162,1163,1165,1167,1169],{"class":81,"line":4},[79,1164,177],{"class":88},[79,1166,264],{"class":84},[79,1168,89],{"class":88},[79,1170,1125],{"class":92},[79,1172,1173,1175,1177],{"class":81,"line":96},[79,1174,275],{"class":84},[79,1176,89],{"class":88},[79,1178,281],{"class":280},[79,1180,1181],{"class":81,"line":103},[79,1182,1138],{"class":92},[79,1184,1185],{"class":81,"line":121},[79,1186,1143],{"class":92},[79,1188,1189],{"class":81,"line":126},[79,1190,1148],{"class":92},[79,1192,1193],{"class":81,"line":135},[79,1194,1195],{"class":92},"        mv id_rsa ~\u002F.ssh\u002F\n",[79,1197,1198],{"class":81,"line":143},[79,1199,1200],{"class":92},"        chmod 600 ~\u002F.ssh\u002Fid_rsa\n",[79,1202,1203],{"class":81,"line":148},[79,1204,1205],{"class":92},"        echo \"HOST deploy\" >> ~\u002F.ssh\u002Fconfig\n",[79,1207,1208],{"class":81,"line":159},[79,1209,1210],{"class":92},"        echo \"HostName $SSH_HOST\" >> ~\u002F.ssh\u002Fconfig\n",[79,1212,1213],{"class":81,"line":166},[79,1214,1215],{"class":92},"        echo \"user $SSH_USER\" >> ~\u002F.ssh\u002Fconfig\n",[79,1217,1218],{"class":81,"line":174},[79,1219,1220],{"class":92},"        echo \"Port $SSH_PORT\" >> ~\u002F.ssh\u002Fconfig\n",[79,1222,1223],{"class":81,"line":188},[79,1224,1225],{"class":92},"        echo \"IdentityFile $HOME\u002F.ssh\u002Fid_rsa\" >> ~\u002F.ssh\u002Fconfig\n",[79,1227,1228],{"class":81,"line":196},[79,1229,1230],{"class":92},"        echo \"StrictHostKeyChecking no\" >> ~\u002F.ssh\u002Fconfig\n",[79,1232,1233],{"class":81,"line":207},[79,1234,1235],{"class":92},"        echo \"UserKnownHostsFile=\u002Fdev\u002Fnull\" >> ~\u002F.ssh\u002Fconfig\n",[79,1237,1238],{"class":81,"line":219},[79,1239,1240],{"class":92},"        chmod 644 ~\u002F.ssh\u002Fconfig\n",[79,1242,1243,1245],{"class":81,"line":226},[79,1244,323],{"class":84},[79,1246,132],{"class":88},[79,1248,1249,1252,1254],{"class":81,"line":243},[79,1250,1251],{"class":84},"        SSH_KEY",[79,1253,89],{"class":88},[79,1255,1256],{"class":92}," ${{ secrets.SSH_KEY }}\n",[79,1258,1259,1262,1264],{"class":81,"line":258},[79,1260,1261],{"class":84},"        SSH_HOST",[79,1263,89],{"class":88},[79,1265,1266],{"class":92}," ${{ secrets.SSH_HOST }}\n",[79,1268,1269,1272,1274],{"class":81,"line":272},[79,1270,1271],{"class":84},"        SSH_USER",[79,1273,89],{"class":88},[79,1275,1276],{"class":92}," ${{ secrets.SSH_USER }}\n",[79,1278,1279,1282,1284],{"class":81,"line":284},[79,1280,1281],{"class":84},"        SSH_PORT",[79,1283,89],{"class":88},[79,1285,1286],{"class":92}," ${{ secrets.SSH_PORT }}\n",[13,1288,1289,1290,1293,1294,1297],{},"まず",[62,1291,1292],{},"env:","にて使用する環境変数をコマンド変数に渡します。こうすることでコマンド内で",[62,1295,1296],{},"$SSH_KEY","として値を使用できます。キー、ホスト、ユーザー、ポートを出します。",[13,1299,1300,1301,1304],{},"ちなみに",[62,1302,1303],{},"${{ secrets.SSH_KEY }}","の記述はコンテキストと呼ばれています。ワークフローに関する情報やsecretsに保存した値にアクセスできます。",[55,1306,1308],{"className":529,"code":1307,"language":531,"meta":64,"style":64},"echo \"$SSH_KEY\" > id_rsa\nmkdir ~\u002F.ssh\nchmod 700 ~\u002F.ssh\nmv id_rsa ~\u002F.ssh\u002F\nchmod 600 ~\u002F.ssh\u002Fid_rsa\n",[62,1309,1310,1315,1320,1325,1330],{"__ignoreMap":64},[79,1311,1312],{"class":81,"line":4},[79,1313,1314],{"class":92},"echo \"$SSH_KEY\" > id_rsa\n",[79,1316,1317],{"class":81,"line":96},[79,1318,1319],{"class":92},"mkdir ~\u002F.ssh\n",[79,1321,1322],{"class":81,"line":103},[79,1323,1324],{"class":92},"chmod 700 ~\u002F.ssh\n",[79,1326,1327],{"class":81,"line":121},[79,1328,1329],{"class":92},"mv id_rsa ~\u002F.ssh\u002F\n",[79,1331,1332],{"class":81,"line":126},[79,1333,1334],{"class":92},"chmod 600 ~\u002F.ssh\u002Fid_rsa\n",[13,1336,1289,1337,1339,1340,1343,1344,1347,1348,1351],{},[62,1338,1296],{},"を",[62,1341,1342],{},"id_rsa","としてファイルに出力。そして",[62,1345,1346],{},"~\u002F.ssh","ディレクトリを作成してその配下に置いておきます。鍵と",[62,1349,1350],{},".ssh","ディレクトリの権限変更を忘れないようにしてください。",[55,1353,1355],{"className":529,"code":1354,"language":531,"meta":64,"style":64},"echo \"HOST deploy\" >> ~\u002F.ssh\u002Fconfig\necho \"HostName $SSH_HOST\" >> ~\u002F.ssh\u002Fconfig\necho \"user $SSH_USER\" >> ~\u002F.ssh\u002Fconfig\necho \"Port $SSH_PORT\" >> ~\u002F.ssh\u002Fconfig\necho \"IdentityFile $HOME\u002F.ssh\u002Fid_rsa\" >> ~\u002F.ssh\u002Fconfig\necho \"StrictHostKeyChecking no\" >> ~\u002F.ssh\u002Fconfig\necho \"UserKnownHostsFile=\u002Fdev\u002Fnull\" >> ~\u002F.ssh\u002Fconfig\nchmod 644 ~\u002F.ssh\u002Fconfig\n",[62,1356,1357,1362,1367,1372,1377,1382,1387,1392],{"__ignoreMap":64},[79,1358,1359],{"class":81,"line":4},[79,1360,1361],{"class":92},"echo \"HOST deploy\" >> ~\u002F.ssh\u002Fconfig\n",[79,1363,1364],{"class":81,"line":96},[79,1365,1366],{"class":92},"echo \"HostName $SSH_HOST\" >> ~\u002F.ssh\u002Fconfig\n",[79,1368,1369],{"class":81,"line":103},[79,1370,1371],{"class":92},"echo \"user $SSH_USER\" >> ~\u002F.ssh\u002Fconfig\n",[79,1373,1374],{"class":81,"line":121},[79,1375,1376],{"class":92},"echo \"Port $SSH_PORT\" >> ~\u002F.ssh\u002Fconfig\n",[79,1378,1379],{"class":81,"line":126},[79,1380,1381],{"class":92},"echo \"IdentityFile $HOME\u002F.ssh\u002Fid_rsa\" >> ~\u002F.ssh\u002Fconfig\n",[79,1383,1384],{"class":81,"line":135},[79,1385,1386],{"class":92},"echo \"StrictHostKeyChecking no\" >> ~\u002F.ssh\u002Fconfig\n",[79,1388,1389],{"class":81,"line":143},[79,1390,1391],{"class":92},"echo \"UserKnownHostsFile=\u002Fdev\u002Fnull\" >> ~\u002F.ssh\u002Fconfig\n",[79,1393,1394],{"class":81,"line":148},[79,1395,1396],{"class":92},"chmod 644 ~\u002F.ssh\u002Fconfig\n",[13,1398,1399,1402,1403,1406,1407,1410],{},[62,1400,1401],{},"~\u002F.ssh\u002Fconfig","ファイルにエイリアスの記述を書いておきます。SSHは初回接続時に警告をだすので",[62,1404,1405],{},"StrictHostKeyChecking no","を設定し、known_hostsを出さないように",[62,1408,1409],{},"UserKnownHostsFile=\u002Fdev\u002Fnull","としておきます。",[13,1412,1413,1414,1417,1418,1421],{},"最後に権限をきちんと設定すれば、",[62,1415,1416],{},"deploy","というSSHエイリアスが使える用意なります。手動で",[62,1419,1420],{},".ssh\u002Fconfig","の設定をしていたのを自動化した感じです。",[342,1423,1425],{"id":1424},"ビルド処理rsync処理を記述","ビルド処理・rsync処理を記述",[13,1427,1428],{},"SSHの設定はできたのでLaravelのアセットビルドをするコードを書きます。",[55,1430,1432],{"className":529,"code":1431,"language":531,"meta":64,"style":64},"- name: public build\n  run: |\n    npm install\n    npm run prod\n    rsync -av --delete \\\n    .\u002Fpublic\u002Fcss .\u002Fpublic\u002Fjs .\u002Fpublic\u002Fimages \\\n    deploy:$LARAVEL_PATH\u002Fpublic\u002F\n    scp .\u002Fpublic\u002Fmix-manifest.json deploy:$LARAVEL_PATH\u002Fpublic\u002Fmix-manifest.json\n  env:\n    LARAVEL_PATH : ${{ secrets.LARAVEL_PATH }}\n",[62,1433,1434,1444,1453,1458,1463,1468,1473,1478,1483,1490],{"__ignoreMap":64},[79,1435,1436,1438,1440,1442],{"class":81,"line":4},[79,1437,1011],{"class":88},[79,1439,264],{"class":84},[79,1441,89],{"class":88},[79,1443,269],{"class":92},[79,1445,1446,1449,1451],{"class":81,"line":96},[79,1447,1448],{"class":84},"  run",[79,1450,89],{"class":88},[79,1452,281],{"class":280},[79,1454,1455],{"class":81,"line":103},[79,1456,1457],{"class":92},"    npm install\n",[79,1459,1460],{"class":81,"line":121},[79,1461,1462],{"class":92},"    npm run prod\n",[79,1464,1465],{"class":81,"line":126},[79,1466,1467],{"class":92},"    rsync -av --delete \\\n",[79,1469,1470],{"class":81,"line":135},[79,1471,1472],{"class":92},"    .\u002Fpublic\u002Fcss .\u002Fpublic\u002Fjs .\u002Fpublic\u002Fimages \\\n",[79,1474,1475],{"class":81,"line":143},[79,1476,1477],{"class":92},"    deploy:$LARAVEL_PATH\u002Fpublic\u002F\n",[79,1479,1480],{"class":81,"line":148},[79,1481,1482],{"class":92},"    scp .\u002Fpublic\u002Fmix-manifest.json deploy:$LARAVEL_PATH\u002Fpublic\u002Fmix-manifest.json\n",[79,1484,1485,1488],{"class":81,"line":159},[79,1486,1487],{"class":84},"  env",[79,1489,132],{"class":88},[79,1491,1492,1495,1497],{"class":81,"line":166},[79,1493,1494],{"class":84},"    LARAVEL_PATH",[79,1496,334],{"class":88},[79,1498,337],{"class":92},[13,1500,1501],{},"ワークフローの初期位置はリポジトリルートと対応しています。最初にライブラリなどをインストールしてからビルドします。",[13,1503,1504,1505,1508],{},"終わったらrsyncを行います。エイリアスを定義しておいたので",[62,1506,1507],{},"deploy:$LARAVEL_PATH\u002Fpublic\u002F","と簡単な記述で済みます。",[342,1510,1512],{"id":1511},"nuxtjsのビルド処理を記述する","Nuxt.jsのビルド処理を記述する",[13,1514,1515,1516,1518],{},"次に",[62,1517,406],{},"に移動してnuxt.jsのビルド処理を記述します。",[55,1520,1522],{"className":529,"code":1521,"language":531,"meta":64,"style":64},"    - name: nuxt build\n      run: |\n        cd nuxt\n        touch .env\n        echo \"GOOGLE_MAP_API_KEY=${{ secrets.GOOGLE_MAP_API_KEY }}\" >> .env\n        npm install\n        npm run generate\n        rsync -av --delete .\u002Fdist deploy:$LARAVEL_PATH\u002Fnuxt\u002F\n      env:\n        LARAVEL_PATH : ${{ secrets.LARAVEL_PATH }}\n",[62,1523,1524,1535,1543,1548,1553,1558,1562,1567,1572,1578],{"__ignoreMap":64},[79,1525,1526,1528,1530,1532],{"class":81,"line":4},[79,1527,177],{"class":88},[79,1529,264],{"class":84},[79,1531,89],{"class":88},[79,1533,1534],{"class":92}," nuxt build\n",[79,1536,1537,1539,1541],{"class":81,"line":96},[79,1538,275],{"class":84},[79,1540,89],{"class":88},[79,1542,281],{"class":280},[79,1544,1545],{"class":81,"line":103},[79,1546,1547],{"class":92},"        cd nuxt\n",[79,1549,1550],{"class":81,"line":121},[79,1551,1552],{"class":92},"        touch .env\n",[79,1554,1555],{"class":81,"line":126},[79,1556,1557],{"class":92},"        echo \"GOOGLE_MAP_API_KEY=${{ secrets.GOOGLE_MAP_API_KEY }}\" >> .env\n",[79,1559,1560],{"class":81,"line":135},[79,1561,287],{"class":92},[79,1563,1564],{"class":81,"line":143},[79,1565,1566],{"class":92},"        npm run generate\n",[79,1568,1569],{"class":81,"line":148},[79,1570,1571],{"class":92},"        rsync -av --delete .\u002Fdist deploy:$LARAVEL_PATH\u002Fnuxt\u002F\n",[79,1573,1574,1576],{"class":81,"line":159},[79,1575,323],{"class":84},[79,1577,132],{"class":88},[79,1579,1580,1582,1584],{"class":81,"line":166},[79,1581,331],{"class":84},[79,1583,334],{"class":88},[79,1585,337],{"class":92},[1587,1588,1590],"h4",{"id":1589},"envファイルを使うには",".envファイルを使うには",[13,1592,1593,1594,1596,1597,1600],{},"プロジェクトによっては",[62,1595,439],{},"ファイルを使用して端末ごとに環境変数を定義していると思います。.envは大体",[62,1598,1599],{},"gitignore","されてバージョン管理されていないので、ワークフローないで作成します。",[55,1602,1604],{"className":529,"code":1603,"language":531,"meta":64,"style":64},"      run: |\n        cd nuxt\n        touch .env\n        echo \"GOOGLE_MAP_API_KEY=${{ secrets.GOOGLE_MAP_API_KEY }}\" >> .env\n        npm install\n        npm run generate\n        rsync -av --delete .\u002Fdist deploy:$LARAVEL_PATH\u002Fnuxt\u002F\n      env:\n        LARAVEL_PATH : ${{ secrets.LARAVEL_PATH }}\n",[62,1605,1606,1614,1618,1622,1626,1630,1634,1638,1644],{"__ignoreMap":64},[79,1607,1608,1610,1612],{"class":81,"line":4},[79,1609,275],{"class":84},[79,1611,89],{"class":88},[79,1613,281],{"class":280},[79,1615,1616],{"class":81,"line":96},[79,1617,1547],{"class":92},[79,1619,1620],{"class":81,"line":103},[79,1621,1552],{"class":92},[79,1623,1624],{"class":81,"line":121},[79,1625,1557],{"class":92},[79,1627,1628],{"class":81,"line":126},[79,1629,287],{"class":92},[79,1631,1632],{"class":81,"line":135},[79,1633,1566],{"class":92},[79,1635,1636],{"class":81,"line":143},[79,1637,1571],{"class":92},[79,1639,1640,1642],{"class":81,"line":148},[79,1641,323],{"class":84},[79,1643,132],{"class":88},[79,1645,1646,1648,1650],{"class":81,"line":159},[79,1647,331],{"class":84},[79,1649,334],{"class":88},[79,1651,337],{"class":92},[13,1653,1654,1655,1657,1658,1661],{},"と必要な箇所で",[62,1656,439],{},"ファイルを作って、",[62,1659,1660],{},"echo \"GOOGLE_MAP_API_KEY=${{ secrets.GOOGLE_MAP_API_KEY }}\" >> .env","とGithubの環境変数内容を出力します。これでOKです。",[13,1663,1664,1665,1668],{},"nuxtは静的書出すると",[62,1666,1667],{},"dist","が作成されるので、rsyncで転送します。",[342,1670,1671],{"id":1671},"保存する",[13,1673,1674,1675,1678],{},"記述が終わったら画面右上の「Start Commit」をおして内容をコミットします。ちなみにワークフローファイルはリポジトリの",[62,1676,1677],{},".github\u002Fworkflows","というディレクトリが作られ、そこに保存されます。",[35,1680,1682],{"id":1681},"全ビルドを実行手動","全ビルドを実行（手動）",[13,1684,1685],{},"ではビルドしましょう。Actionsで対象のデプロイ名を選択して「Run Workflow」を押して、対象ブランチを選択して実行します。",[451,1687],{":src":1688},"'github-actions-node-js\u002Fdispatch-job.png'",[13,1690,1691],{},"ビルド中の様子やログは随時確認することができます。ビルドが無事に終了すると以下のように全てチェックマークとなり、処理が終了します。どこかエラーが起きた場合はそこで処理が中止されます。",[451,1693],{":src":1694},"'github-actions-node-js\u002Fsuccess.png'",[13,1696,1697],{},"終わったら本番サーバーで対象のファイルが作られているかなどを確認してみましょう。",[35,1699,1700],{"id":1700},"使ってみた感想",[13,1702,1703],{},"少人数でこれぐらいであればローカルPCで誰でもできそうですが、ボタンひとつでビルドできるようになることや手違いもなくなるのでとてもおすすめです。色々自動化できるようにGithub Actionsを色々探ってみます。",[1705,1706,1707],"style",{},"html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .sbqyR, html code.shiki .sbqyR{--shiki-default:#FF9CAC}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}",{"title":64,"searchDepth":103,"depth":103,"links":1709},[1710,1714,1715,1716,1717,1727,1728],{"id":37,"depth":96,"text":38,"children":1711},[1712,1713],{"id":344,"depth":103,"text":344},{"id":350,"depth":103,"text":350},{"id":365,"depth":96,"text":365},{"id":433,"depth":96,"text":433},{"id":511,"depth":96,"text":511},{"id":32,"depth":96,"text":32,"children":1718},[1719,1720,1721,1722,1723,1726],{"id":806,"depth":103,"text":806},{"id":1057,"depth":103,"text":1057},{"id":1151,"depth":103,"text":1152},{"id":1424,"depth":103,"text":1425},{"id":1511,"depth":103,"text":1512,"children":1724},[1725],{"id":1589,"depth":121,"text":1590},{"id":1671,"depth":103,"text":1671},{"id":1681,"depth":96,"text":1682},{"id":1700,"depth":96,"text":1700},[1730],"devstack","2026-02-11","not node.jsな環境でアセットをビルドして転送する。","md",null,{},"\u002Farticles\u002Fgithub-actions-node-js",{"title":8,"description":1732},"articles\u002Fgithub-actions-node-js",[1740,1741],"infrastructure","node","tRNfJ9LFek0TNwphGk2rKIZmRCAhyvmVgSvx-MGlLXE",1780987134113]