逆引きマニュアル: VuePressをNetlifyで動かす方法

投稿日:

やりたいこと

VuePressNetlifyで動かす方法です。

前提条件

手元で動作確認するためにDockerを使っています。

概要

Dockerで動かすときには、yarnのバージョンを1.6.0にしています。 1.5.1だと以下のエラーが出るためです。

yarnのアップグレードの手順は以下に記載されています。

手順

package.jsonは以下のようになります。

{
  "dependencies": {
    "vuepress": "^0.8.4"
  },
  "devDependencies": {
    "yarn": "^1.6.0"
  },
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

netlify.tomlは以下になります。 これで、Netlifyへのデプロイが可能です。

[build]
command = "yarn docs:build"
publish = "docs/.vuepress/dist"

Dockerで実行する場合は、以下のようにDockerfileを記載します。

FROM node:9

# upgrade yarn
ENV YARN_VERSION 1.6.0

RUN curl -fSLO --compressed "https://yarnpkg.com/downloads/$YARN_VERSION/yarn-v$YARN_VERSION.tar.gz" \
    && tar -xzf yarn-v$YARN_VERSION.tar.gz -C /opt/ \
    && ln -snf /opt/yarn-v$YARN_VERSION/bin/yarn /usr/local/bin/yarn \
    && ln -snf /opt/yarn-v$YARN_VERSION/bin/yarnpkg /usr/local/bin/yarnpkg \
    && rm yarn-v$YARN_VERSION.tar.gz

VOLUME /opt/vuepress
WORKDIR /opt/vuepress
RUN yarn global add vuepress
EXPOSE 8080
CMD ["yarn", "docs:dev"]

Dockerは以下のように実行してください。

docker run -it -p 8080:8080 -v $PWD:/opt/vuepress イメージ名

補足

マニュアル