The most intimate NPM private server building tutorial ever

Hometown should be white, cool night and autumn equinox. The moon is clear and the sky is quiet. Autumn Night in The Guest Zhong, written by Sun

• Wechat official account “JavaScript Full Stack”
• Nuggets’ Master of One ‘
• Bilibili, The Master of One
• verdaccio

Related steps to explain the synchronized recorded video, if necessary, please go to station B or wechat official account

preface

In our work, we often develop a lot of generic code, such as UI libraries, utility classes, common business logic code, and so on, which we have explained to you before. How do we put this code to good use? At this time, these libraries can be published to NPM, the required project installation can be used, but published to the public NETWORK NPM cannot guarantee the privacy of the source code, then we need to use the private NPM repository.

Advantages of private NPM repositories

1. It can only be used on the company LAN, which ensures the privacy of the code
2. Because of LAN use, dependency packages download faster
3. You can configure permissions to publish and install NPM packages to facilitate the maintenance of the NPM repository
4. The third party NPM package was modified, but the author of the release package did not incorporate PR into the master, so this function cannot be referenced after the installation of the package. At this time, we can modify the source code of the third party package and publish it in a private warehouse, so that you can download and install it instead of in thenode_modulesChange source code in

Using Verdaccio

Verdaccio is a lightweight private NPM agent service developed with NodeJS, so node needs to be installed before using Verdaccio. How to install Node is not the focus of this article. You can do your own research to install Node.

Install Verdaccio

Installing Verdaccio using NPM requires a global installation, so be aware of permissions.

npm install -g verdaccio
Copy the code

After the installation is complete, run the command

verdaccio -h
Copy the code

If the version number is displayed, the installation is successful. If the command cannot be found, restart the console.

Run verdaccio

Running the verdaccio command is as simple as executing verdaccio.

verdaccio
Copy the code

In this case, the result is shown below

warn --- config file - /root/.config/verdaccio/config.yaml warn --- Plugin successfully loaded: Htpasswd warn -- Plugin successfully loaded: Audit warn -- HTTP address - http://localhost:4873/ - verdaccio/4.4.0Copy the code

This is hints, verdaccio configuration files in the user directory. The config/verdaccio/config. The yaml, edit the file can be modified for verdaccio configuration. The configuration is described in a later section.

Open your browser, type localhost:4873, and you’ll see a web page that displays packages, which is empty because we haven’t uploaded any yet, and prompts you to publish packages to the repository.

Configuration verdaccio

Verdaccio configuration file for ~ /. Config/verdaccio/config. The yaml, use the editor or vim open the file, verdaccio default configuration is as follows

#
# This is the default config file. It allows all users to do anything,
# so don't use it on production systems.
#
# Look here for more config file examples:
# https://github.com/verdaccio/verdaccio/tree/master/conf
#
# path to a directory with all packages
storage: ./storage
# path to a directory with plugins to include
plugins: ./plugins
web:
  title: Verdaccio
  # comment out to disable gravatar support
  # gravatar: false
  # by default packages are ordercer ascendant (asc|desc)
  # sort_packages: asc
auth:
    # max_users: 1000
# a list of other known repositories we can talk to
uplinks:
  npmjs:
    url: https://registry.npmjs.org/
packages:
  '@ * / *':
    # scoped packages
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs
  '* *':
    # allow all users (including non-authenticated users) to read and
    # publish all packages
    #
    # you can specify usernames/groupnames (depending on your auth plugin)
    # and three keywords: "$all", "$anonymous", "$authenticated"
    access: $all
    # allow all known users to publish/publish packages
    # (anyone can register by default, remember?)
    publish: $authenticated
    unpublish: $authenticated
    # if package is not available locally, proxy requests to 'npmjs' registry
    proxy: npmjs
# You can specify HTTP/1.1 server keep alive timeout in seconds for incoming connections
# A value of 0 makes the http server behave similarly to Node.js versions prior to 8.0.0, which did not have a keep-alive timeout.
# WORKAROUND: Through given configuration you can workaround following issue https://github.com/verdaccio/verdaccio/issues/301. Set to  0 in case 60 is not enough.
server:
  keepAliveTimeout: 60
middlewares:
  audit:
    enabled: true
# log settings
logs:
  - { type: stdout, format: pretty, level: http }
  #- {type: file, path: verdaccio.log, level: info}
#experiments:
# # support for npm token command
# token: false
Copy the code

The following describes the meanings of important parameters

storage

Package configuration issue to the private warehouse store address, the default stored in ~ /. Config/verdaccio/storage, we can regularly will clear the contents of the file, but must be cautious, because the folder to store the package more than our own, There are also packages pulled from the public repository and cached (how to configure the pull cache, later parameters).

uplinks

Perhaps, our package released to more than one warehouse, if the company in accordance with the business lines divided several front department, technology can separate but Shared between departments, NPM released at this time if we want to use their private package at the same time, also hope you can use other team development of NPM package, then we can be specified by this parameter. In other words, THE NPM public warehouse can also be understood as another warehouse of ours, such as this warehouse and Taobao’s warehouse. The configuration is as follows, which is only defined here. The real use is in the parameters managed by packages

uplinks:
	npmjs:
		url: https://registry.npmjs.org
	taobao:
		url: https://registry.npm.taobao.org/
Copy the code

packages

This parameter is the most important one in the configuration, because you can set the package permission, set the permission to publish and use the package, and set whether the package is proxied to the public NPM repository by configuring this parameter

packages:
  '@heyi/*':
    access: $all
    publish: $authenticated
    unpublish: $authenticated
  '* *':
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    # if package is not available locally, proxy requests to 'npmjs' registry
    proxy: npmjs
Copy the code

By setting the parameters above, we have agreed that if you publish a package with the @heyi prefix, it is private and will not be proxied externally. If the package is published without the @heyi prefix, the logic of ** will be followed, that is, all packages that do not contain the @heyi prefix. It is not difficult to see proxy: NPMJS specifies that if the package is uploaded, it will be proxyed to the NPM public repository. If a package is downloaded without the @heyi prefix, it will be automatically proxyed to the NPM public repository to find the resource and download it. By default, the pulled resource will be cached in the storage folder we specified earlier.

listen

What port does the service start on? Verdaccio listens on 4873 by default. We can modify the configuration by specifying listen parameter

listen:
	0.0. 0. 0: 3000
Copy the code

After setting verdaccio, the port is listening at 3000

At this point, the configuration of the NPM private repository is complete, and we can develop packages and release them, but before that, we recommend a tool for managing NPM sources, NRM.

Gracefully set up the NPM source

Install the NRM

Install NRM using NPM

npm i -g nrm
Copy the code

See NRM help

➜  ~ nrm -h
Usage: nrm [options] [command]
Options:
  -V, --version                           output the version number
  -h, --help                              output usage information
Commands:
  ls                                      List all the registries
  current                                 Show current registry name
  use <registry>                          Change registry to registry
  add <registry> <url> [home]             Add one custom registry
  set-auth [options] <registry> [value]   Set authorize information for a custom registry with a base64 encoded string or username and pasword
  set-email <registry> <value>            Set email for a custom registry
  set-hosted-repo <registry> <value>      Set hosted npm repository for a custom registry to publish packages
  del <registry>                          Delete one custom registry
  home <registry> [browser]               Open the homepage of registry with optional browser
  publish [options] [<tarball>|<folder>]  Publish package to current registry if current registry is a custom registry.
   if you're not using custom registry, this command will run npm publish directly test [registry] Show response time for specific or all registries help Print this helpCopy the code

Lists the NPM sources of the current NRM store

nrm ls
Copy the code

The results are as follows

➜ ~ NRM ls NPM yarn -- -- -- -- -- -- -- -- https://registry.npmjs.org/ -- -- -- -- -- -- -- https://registry.yarnpkg.com/ CNPM -- -- -- -- -- -- - http://r.cnpmjs.org/ * taobao ----- https://registry.npm.taobao.org/ nj --------- https://registry.nodejitsu.com/ npmMirror -- https://skimdb.npmjs.com/registry/ edunpm ----- http://registry.enpmjs.org/Copy the code

Using a specified source

For example, we now want to use the NPM official source

nrm use npm
Copy the code

Add a user-defined source

Adding commands is as simple as specifying the source name and source address

NRM add heyi 47.94.248.23:3000Copy the code

When you run the view command again, you can see that there is an additional record in the list, which is the source we added

Login NPM

Note that before logging in, make sure that the NPM source is pointing to our private repository. Use NRM to complete the switch

nrm use heyi
Copy the code

Add user

If you log in to the service for the first time, you need to register the user. If no special rights are configured for the service, add the user directly

npm addUser
Copy the code

Follow the prompts to fill in the user name, password, email

Publish a package

npm publish
Copy the code

Since NPM releases are not very relevant, we will skip over the points to be noted in this article. If you are interested, you can check out my presentation on package development: Ant Design from scratch, leading you to understand the DACHang front-end development paradigm.

Well, that’s the end of the script, if you haven’t had enough of it? It doesn’t matter, the public number and B station have recorded the corresponding video of this chapter, after reading the article, get a melon seed video review, life ah, really sweet!

Start Verdaccio with PM2

pm2 start verdaccio
Copy the code

Thank you for your reading and encouragement. I am one. Farewell hero!